{"_id":"@material/mwc-elevation-overlay","_rev":"402-882d1ac2f6b2c02810e954d887687c1c","name":"@material/mwc-elevation-overlay","dist-tags":{"canary":"0.26.0-canary.0af8ade5.0","latest":"0.27.0"},"versions":{"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.3f99af40.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4+0tZG3PM96x0n5diVfKplPQwNEO3xvNlXpIBl3P4R+6Gqq9ezhE1xF8hY9FY2i3vRpaNKGeqZbpG7d05BNdTQ==","shasum":"d15d10de2a8f5919dd590ce109e3100403dfa0ef","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.3f99af40.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSm6CRA9TVsSAnZWagAApjMP/1n8HVPRUQ/b7/gQhHM2\n+EWu8B1Nv7XgFPlSe58WpXjusjZj6g2w1OMra7J6JD2Qx4DWJgx8TWkPFJxl\njonH69ln7LPp+5Vvuvpck5PFSb1K0k7OFBseTZq7gGeRFuNLEH9wf6YglZUi\nE2bLTG7AvwTkFQ0MLJSBZRgUpWAgNDP/f1K+tcN0HGAVSLvAE/cJw6xNL0Iw\nejwkY3rHq34uw8S21H5YQhpEtyW47t+14NUTVaw4XPLv/bJp8f/dmy7dbwIR\n99J1kZZ1vkDu7YwlHUGDfY6mbAoull/ARr2bia4POS8vS4u2UUMMIPiT4kF5\n/cYBJwr5+u9EdfG4Sj4zR3v286I9lxGVde8/5t2TavTfL3OO7x/aUa+Zmgw7\nqeEkMfyDqSKyrXRVRz3mwn7bpDYsuNE73unB6VwhGns9oEoxKxOy0ci5SCM0\nQICbb7oCAVIbWw7HhOz4/o2yp7SMB5bbBRuuEROhO7aDEUAsO0fRCQDFBzib\n8f8PEbhD/oxlKFCV4Neo6fSnG43TZLv+981huhPPftG4/i1qYRoXFh3AgGF0\nExIUp7LctDy/dQSVvwfCLsouzwPj5a7c6R6FeuRnO3u6PgYjU8+Hv8fKPtO9\nCwCrJupgZY+3QMZVmNAmmEqLvn14reDMSByIrVN7/yoQkOCCKjtCvbObsnlp\nbzWS\r\n=oXND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFrocJeEqimLnMEWZCL8L0zOFZGs3LIK/OgN8ETdk47QAiAB7ij19oZGztq/fj+NasN/I69mzkOwNWJl6flY0593Rw=="}]},"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-elevation-overlay_0.19.0-canary.3f99af40.0_1600989626285_0.5163549160560328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.72aa1129.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GPUvJulM3N3WefBaHov0f7asj607R0pXNKDZFh0GX13HH8wjai/Y+HQ4M4YKaSokXqGMiHDUDB2pWoDXeo8M/Q==","shasum":"ea3c3dbe0c074a87e43c8145cc7fea56c267f0d3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.72aa1129.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblvWCRA9TVsSAnZWagAA1NAP/iOmV4p4qCLT0XA1kqbt\n/rZjaFyQD003x9mEEVciH68zlvloANqMbd1ZJkbMxS3YEDa+q15PyRJpA0t0\ncDozqaW24aClP4QCiwZFGrHcMAlPDk0uI8wpsLZj12VclHBe+xQutiZ5vNqL\npEKp3DXYAi2nnd7R6x/Ak5gtuKDScMhcnnPepn9DlQSt9/mjfvgFsZ1dQmWd\nd/ueCLaHJJN6uInFfcGtxpfcFatKJZ+aZHbjS3Gvw4G29DfsctoQiFxUtUut\n1rZZ23VFsGhU/rZJqjvgxDoTokppWviyqkSTIrDhqNed1eMEYn2rbkvGaccW\nsNV7fhlDjWTGHFNMKdf7dmRusfYPFvvo5T3wCYpdsI8cyftMOalNbM31U55i\nfKXkycpRROQARxoxU1Gx96TNTbllnHUUCuWSohw+AOcIIOjwj0fr/m6aXDsS\ncpVkxTGkGlGa9UV5wDT5xBBn4esVcL325TO834CTU6Xs9S2Tbx2iSypcbSIK\n8NglJvK+rnz/fHFlwEkSLR6vtXnbiUrsA1K7Y1bhkS/xAakIj3VJ4kjFCKnw\ns9nhj69JZ16O84OZaNZK8QGDPNf+zfEBVf9Y2hWRkSvB2obFeVJ/7pm+IXoc\nPsj3GDbQLWQ+cHZEfwvaz/O5S45KPXr/02VDPonrejXFIDR8RVA8u0OUmJPL\nt/Qd\r\n=p1dt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFy7UsLjLbOBw2iMdN8m1gTSnobFt1rhJhPP/vbroafEAiA93S5bGjrNuR/9h+q22m/OvclwXWtvD0dCXgbT7ir7XA=="}]},"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-elevation-overlay_0.19.0-canary.72aa1129.0_1601067989416_0.7823340913361423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.394fd3f6.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-1V8fjkkwhTLJOd1JrdI5NfxGrQiVLwdf90BiXiYNq4Bz6F5g0ikbXKt91W38GK2i20oQWpB8lVbaO0b+B82ztA==","shasum":"b439952e8842c4c747ef60d4f77d47c37f3e1611","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.394fd3f6.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce71CRA9TVsSAnZWagAAQuwP+QFMH8q2Y9jaOl61QYDg\nK3GL4XCsK7mD8nfm4ISwU6S4BkmerKJKDb3bKtcnCcdMTKMyNgiB+chJsqpi\nB18LjW8Z/1QVrk7/8tfOVTXH9HJxe1wY14Dingn2fa0K4vOufuhIIpeTjC34\n0K1mBXk4M3KSmfUGiMV61/+K7IaDDjrkPSZH4F4+j9iA/PBaWs1xul/RfBAg\n5uklBO3jUnbhG3L9iValzw9Jj6FgtTL3b3Cpkr7YnFX5mtdOMH0LLBw9P65q\nQQzTiQ0aqYk3MlU0IWZ98na5D28u2m/zPygzmmNq+8SV0d4wOHTDnqNUfLCz\nESCJVElqB4QauSE3eMywLcqd2/7cvFyiH9V/ym2drnHD+MKcBubkGG7zh4aZ\nSLJ3JH2vTe5oU7/3bz9aSxqCMpjm/BXjH1MbVL9WrTxN364mqOuUZGZ9fUyb\n4k8KTWeGJlEGMqahpUZXiIc1MziY5PbtbkDXaj2M4s2JbY5T9k6kIBzYXul+\nm20b0RlriUfXzfQcihjOYw8NBeFuiM8rPJLiQSWdyksRGtRzVD08w5CeyD9u\nl/79S94wSu9xYZsHqHR8RyPWDilFH56p5YapK+siotdsrVhoA3BkeG7HCcMW\nC0wJ7fDoDf612qrPu+Bn166Bi8fWP9DxfiWpaECF3oYc+1bBDN+Q2V/dFXbS\njQ/a\r\n=TP9A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCW1KuFOuElpsiaf/kUawUqhK3i9qrfTY3l8ZDEHu/zSQIhAIVapdCR042T2nKb1h0KoLuHmKT6pf/gAzZjAICEqFQf"}]},"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-elevation-overlay_0.19.0-canary.394fd3f6.0_1601302261394_0.2961222410847053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.347110f1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ASVFj/stQWpBU9I7yL3sqxtBofxbPbzY0k1Z4jHSB75peUHTRbFyR+XZGWm4Trsxl/fKKglRdAkNk3lVu0iEyA==","shasum":"76b3a9018792cf1db1563713d1919ff88737fbcf","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.347110f1.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchQYCRA9TVsSAnZWagAA3LcQAIq6SIg7H7d3Q3/5zCNT\nx870dxMBcNxowLSIQfgIbw3mlM0DOz4CCW9OPfD7zguIpSa1mmEQmypH3RJE\nbShoOXZRXR02GdmgLYO0wsBOVaiuyAoyUixRZ1hfssQuCXICsRDuuwPYgm2K\n3aw846sav8Dr8nxgN3ex4XF3ULTgHDIFdgvOV0kHK3IqLlJ3NWBKhNYIf5uT\nWRuAqTsL2qjhlPI7NOUwH1w6fby2KPyOVc3EJre1SBhMc28uq4hEAfTd/mdk\nWbXYloUOGyhmEk26R9ZG2c9RdjN/FbzzHbkYTStdm8aJmXSFv8b7bB5Cax49\nLj5W61KudehHyeTyzmeHCLHzfH2ncsLGgesTZV6rPb9IqYpVIlLnZywiNeB4\nWOeRq14yK78rHnZSPJ6Qwm0iY84oXiV6IqFxhvWaXAqq2XKGewOmWyJSMcj6\nBjWjKkrQChE2hwseXsci4+M+xQ0ULMB5zfU+yhPCSZdvCvDid7KmFP/6A1yr\nm7H8SAmlWX72B40zIpKYo6jDCxKMNtw9r61UeFNl+xqsMkIEqpRJF2AGIQZV\nMPzJINK4by77hQDUWkIzEovk+FIIzzY2FJl6m8jzYyXa0ig9ZzNkimWuBDkS\nIIY+bey5kJAkn6WnAPywYmJ8LA+BW17dTcvehFNCAEcVJY2K2eaPbEd0aC58\n8yKG\r\n=yHHv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrZh0dVQA8w06j3PabMcILlqnZRzW183jxDFUFlZLcGAiANN3/AKjDkUwI/VbMicmC8868J1z+JaKpyyakLC23g8g=="}]},"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-elevation-overlay_0.19.0-canary.347110f1.0_1601311768073_0.1394126499762265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.5e330bb9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-pGloHdVLqSFgyGxmqwjCK6tdMi8ePR+2lTjgU+SVcv2iP+Ef27JqZYBv2CHPqFi9eGII4R/4eboGA+q48eIj4w==","shasum":"182261aa2024211d991c59f8494d5eac6398582c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.5e330bb9.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdP/9CRA9TVsSAnZWagAAXbgP/iMA3MjQj/lXdrwCn+MF\njkIs9Y3sZWHPohZo1O4nci7i6GWYU05K4WoIGDFSQG0Iv4U9p9s9p2nMQz9s\nU7uy78bkluYRCyneRnjOWD/c0AUiklJVd85TxmRJIqT1ehpsQddbSVs1kCIO\nJB+g5l/nS26KMXHBMRhTd6j2MVE5bjv3MAMz6cx0RFdWzWsUZn8yDO3bFqSB\nWHoC0fXZnHYoQPP7q2a0NdZKR2IWpjnkmQ/VDfcRZIBAiH7l0XyQ3Ld1S68Q\nC2VLhNHWhcMyqlPfQzwQwWVt+0ucGXFFRDlsaLOecRXxRhU2JjyZMnXsMTbm\nF/4Exm0CUfwj6y+G8mpKeiDqE0p4SPdC2wfPlsCVy/WPYymgUVwC2+jLfzd/\nOCJ6LaD5Vmmm5XvLwNWpI6uI7PVI3Lfy8QI2KRzwmijdeohFDPsfyNvkAnPA\nwDGK+X2w+9MnsFPcgriu2fl8e6xCOcO8g5JiAO69WR3NNRz8fSOUzhccMwiA\nndgYDN0I8OZmWw2t8bN467TFoJucgVxDYSe+9N0XQvXp85l8RMRXSfl6znED\nQws14qFhzbvEIEW+ua/bDx6+04hmQ7GeR6ff+lz5C9cfAfjchbo9yNCGU+FI\nSrMEAqZUsLwUyeYHHuf0dIjEJyQXjRxWdarxXFPYyx5u6IHyDobjBEVw0Y26\nayNZ\r\n=UxfM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs/cT6uWJzu7cdbJx/uKzd93c7SfiE/C7f5ipI+C4IowIhAOGtTVk1DbsGeX3xVlNH1nuR9PFnmAK7M8ezcwTQg8ha"}]},"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-elevation-overlay_0.19.0-canary.5e330bb9.0_1601503229342_0.33019991582033836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.30b9e3a9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NLb82Qzo/nCqvZhR1DkeCMseSIu+jpi77pAw09mRzgbPHmfYcC3vASzarxsm9Fyn501crNwb7weRkzElorchZw==","shasum":"37d7de88a1f2d8f30f52779fbbbef5ebde3cb0bc","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.30b9e3a9.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQilCRA9TVsSAnZWagAAkQgP/1tW0XQePNtsIz92RIiz\nuVczEqP4KMANRX3qfX18MABhQAxnuBSwEH5RtIJwrRreogM+xV5bqiyanPxe\nDmnFFuDwFpMXv09F/jJzAgnMvE2ir1U4TQIn1AEn0ZyxuE7Zku4+2HYCepZd\nXnyxwfU17PJLekyEL/OlBtfBEA5qq/O40WEi/pNnBXwqD8WC22/BlZZf9lvQ\nE1MpZOadlEzO2ZGn2f3waW/l1B+M9VqThVYnLCMHTW8rsTcZOOGp5BMRK60D\nKCZB76DmrnZmili4ch0w9X0jItYOiZWIZ5KAvbD6HNWVNQ4wtZd8yvjCxXBU\nxHrI4jpJgNKvQqeu+Q/RLp9hDBjZzMv0fN7kii+G4ring68uzDfutiznO0eE\n6ZLUTSpqxqUE45yCshLQmS6r1ZN1rb8sCAYkNc4FPZI14Dn+KAHjt0VjneHr\nPBmuKryB0lmMHm3BKJlL334QJ/4BnFUW/BgEZyyoTtWd3eWip0JzY8Z0nHi8\n7HroMqtNS5hW1A11cwn3i+kVmRPUHkbEndka3bJgvxnd4blSgHeEJJNDguwR\n0IsUkgMak7a6179xFxmVwFheCswMMROl3XAgaXnRigWNpYYJ2PfZ0grCC7gn\nP/NsCsySVC3UPqVZOrugLehAE6RO+DS3wNzaZ94MSnNwPjF8olBkDcxAe2eA\nATyT\r\n=ZglW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJLScGWpgQwYT69nXO/O7qd1RSIXALgybAiY1n/raptgIgbgzeh2Tns5VFa3Z3EtuIRmm5MHLdokUqzO13PtuE0Hk="}]},"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-elevation-overlay_0.19.0-canary.30b9e3a9.0_1601505444799_0.6694772192226477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.7bb04b9a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-hQ7UPrJwI4n62o/uw0RRwitfm+GLiM2rC8Szd8SKxXhdR7DNBKvMIdte8h320oDoDBjLBP6Uc6IWL7xeH+2LjA==","shasum":"703fdbedfbe37402ca1b6f0e9f02cdbc76b25f49","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.7bb04b9a.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmSfCRA9TVsSAnZWagAAf1MP/jlkB1CrPuD0Ilhkz5Rs\nJZgWPNL0/HbKcSmKGOXKsKG7/FPzHP0v445lcYp7kz1+Hqmb/PQL4+Fzhdw6\nfjCQApWA2P7/pHac2MGX5gVYmCUjeGw7LPURENIsOCDYuvaUa/EyRZ4+tGw5\nqbTzBb6USUBSyEoQQtfuUj255CjtospqqVMLKc/ssUFW5bUKu7kqnCxHSzgM\nre6EBiGATLgJLT8YSX7gj/CO6915/pbgiwLhaddyDHyhveQYqhWo4nNNbZth\ncX/VMWVyt/QkmgbiaTM3yPUTVXl0/fCa0b0gRsa2nAf9iq7uH/Xk2ryenxJs\nDy/qrcynZhE4q5+W4AdT4RMfaITBq8LTIPqa3ZMGxtcFN6Ng+9coKDjJ6CgP\nps7PBxXSfPLBeO8zmsbTlP0fkEVV+Q7ULG4yw9fqKMj/iTi5EtM6xID7sQ+t\nxowAr0sg7k4Xivky0JromJlEszqBxcHSobvxCFt357BrKrvxcwF2vaaK/cDf\nbzDQS0R/IRAfHqxGPBHR4KNVGZq3thdEfhtuCWGTTCpACIDXqkvGTRC8MmrW\ntdQFLMDuBoeRd90mbx21Pj9P73tePheYDhNmsgIieNxAA3NapuYtD7RIy/8X\nGjBMcuzhq2dkHJRW/dvKplT1C0ljInyuRWjFy5yhoAt8FGLURz5NQ4QPCCz3\n2rvV\r\n=jLA/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiUleD3SeZunC84Zzs54ObNYeUnym3gIKoJQdNOGnVbAIhAJBNGkiNWEcGGQKTQ6J8anb1zAv2KDczKUfEnviWlQak"}]},"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-elevation-overlay_0.19.0-canary.7bb04b9a.0_1601594526986_0.7794931084727215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.615d861d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-jyNIZsHbk19h34kG9Kh/X5QrXbvpLVsmhtcjGBl7JT5gIxV54YiCbTo98sjfgNQvnJy8fKqGzV9QS6et0wAMLQ==","shasum":"408b6c20096e4755959b0938a606e79f6b2405ed","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.615d861d.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoM6CRA9TVsSAnZWagAAj6kP/jm+P8ENLYtK9x3bu98N\n6LeP8YD+nWTapl/7QHuJ/ysHszvhismsEpNN+8ym5sZmvL+/vh/GW9wiWps4\nG0PXYjhgZ0B+7gNJdAS3qIQRZQlF8ovJowBQrL35ODM5SL0vyZ64sVUyi6dL\ncH2D/GkhYKKzAjnn0SyC6qZz03OmlJLjmdWMn+68zsZqA42Fp8NbyfXFkLut\nXqD0YBUOKC3qXYi395KcYlC5jd4/5A6ZvEsmj8qO8oN1Zia4IuaebQyoRhIz\nOqmP3vtsRALzH3nlfDyk50BUWOGcpZlcCVKkLEB3dkCQoXZT29nb6tLvgnUo\nryqOUsqM/4o56U+kvUXXe4YkazOWBXo07/WpvKR5h+nbCc+gTHPXwGm2UyXm\nhNTF5KFe5hBCd4zw6Tfiu/PeFibiF7vgyMKBe9Dq0HzlC2QSqDVVizvWOZbt\n6yZSOY6bDyuWXzB5WeNR9tvG755JbPjeDRmVZ6B6xTv1aCRUeD8m6ctDLRvj\ng75SgDapv2G/AHli2YGQzD9p1xz6o3EumXJrM4NAVxFf8EggIgbsvY/PcdrC\nRnUxyJJbHN1AlEmlYwJQGOZb3DEkVc6An6WNVImirF30ytqknh4xL3jrD0h0\nT6YSQxtqYbDCfnkyhQFMEQ39mdpOme7ZGR/FWFantOzDTSHIuOrzYSsSCxSM\nR2UR\r\n=i72r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7VbtsbPoqgwx3p1hJFGgVtt9rzZSaq4hQ8fagruDLXAiB7AcPNDAfKlxjjBrXK0hKoBcSZTLiOmX+BPl9em8wj4Q=="}]},"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-elevation-overlay_0.19.0-canary.615d861d.0_1601602362025_0.323299720863492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.af110e86.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+SJixXk72a2i0jAf4dxyLCDsPfiX/B/UaTApum+fBKiGAl0bVKm0CrlGwanZc5cuVb7pxCk+B99f+dlUe6mhBQ==","shasum":"b413febb598130d392b2a570bb433d05c35238b1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.af110e86.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7x5CRA9TVsSAnZWagAAie0QAJl3bPngr6o4aM8Mjxo8\nJpg/5Rg0DQMHm5j3cPeLfqTK4krFF4SR4QEAUVT2a6XlvTtp7cpaWJRVFHAP\nhoN62jQtcQwS7KHKOFVhKRdlKKaLgUVklpmkW6rK/qC2niJkUuR/QVs4nPtO\nWtA0sCZbiYfB5xjef38EK/Q1mywf3OK5Jscz1jDldGu9F4cC6kIHdkxMyjj8\nHEESGJokmzk6Dc1M1LET9EbUO5kgfIYE1brR3ZqMaKWb2RITxW0jmZUSie7v\nxOBJ+sxv/KPSLma888THk+H2qRcQtqtwimktyHIEM+Vb2eLAubxrW3LTXj7e\nTdcaMsUWlkffwUwLMZmuh9lWkEXPenowjLnGFPp0sV3O4WhltEk3D7mEe9rX\ngR8eKkT8+jWGdsSoOkfDEWlhTqMyY7mMqH+SB4m35Zsn4nJZDjiQu/quI/ZD\nFeeFFpbgHxosbRR8hFuMDwsnNl9IzOVX7QLnaL/rU9/B3w+kydwj5UQnkfJt\nscHAxUW+yKogRxW+RKFL/uRcsUAwCZ4nUUcTjVLLXeUNweBWXPZX/c7b/39Y\nf8qsFxJii0MRQVhdz8HZ53UMbg2qffh+R6LWcs/NDzZMq6FwNoqeHmS0olTD\nqFN7tx23yoDS2OF+CFwFYeR0YS/+LTvcdKmlQ0Fx+1945QuEZv/i6ip1CiaK\nLnxY\r\n=Cukv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2EQnaoL2mSsVqfZm2L2Wp+Qgn09ZQ9b6v7yNUg4IIkAiAcDsjgsOraGK/yZNCM/ZJZdBR+iW9Go+Cup0F2y0ndyg=="}]},"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-elevation-overlay_0.19.0-canary.af110e86.0_1601682553350_0.9426697247567357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.89d27ca5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JGjFn5tIlevsvjO0Dzof147xsBVzsYngbI5HMm5tlkLfSbcfUuWtjDPGaLcuBDuXsQjzyVZEWj3/7ric3YwY4g==","shasum":"2397628302d6fac460f83dba46574d242b395c2a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.89d27ca5.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fDCRA9TVsSAnZWagAA9GcQAJh23Z4VQkXek6fzW9dN\nNP+O6C8gpfU1QFGiKvaffvyZvEN8wpwij5U8BoOE1bPHhCYnF6RkyhJc9wAX\nLDIUwgTntJ/ITHJgIs8L1hYO0Y2yY0GR5qFj+yBvRswoGlU92tyVAIlNQAe8\njaAKxAlqW0/6UVirTcDPtM+n1PGm35DFkfO+ISqdYrCoNNnN7jyblcqkHHuu\n/Wa/4ntts7Q3WTL5bvufo5ekLWWU5XUNka5FBrxIAOilszs3y9oaEdF06VaJ\nw9rssc+5EMOz1rnQCfjbCemaHD3BrXsT+EdxBrfoPcRWzCArS/YXliNnwk7x\nTavom6Ow+MwmPK+JC9o6Mm+YJk2fzSUD2pHOMrNtiSKv6/IMkDal7YT/A356\nNRwYo7zgw5U8aVHIaGa4I8w2h/H9P+wHRDOu9xUhyQFYLWDYrZ0N2s1f/v+k\nB/inkzBskORxdwzdqPqGilsuV9TBm7VAFzAhdvEllpShT7ECjhto98Z5PDfM\nM5j+VB4nPG+2PPbuT/6NV8ZjLtBdyrlXoH/tyuCnowGNWDwcAWe4A3uvadTZ\njeuLwpQ3ul/lAX70MJFyAdGRyQ2ArURIdD6LzhOwQMcc9KTfdfio6ebIucWU\n7DEnOQDl309zfs8+llSm9ji2oi4Lbv7ZJ9oPf5H2OtWE99hE5d69Ezv18SGF\naavz\r\n=p2gA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz3u3Xv0qGsP3I4Ihg8nppgmVC1sPExe+j3zKoh2AkzgIgXKg1VTbjUaMQxcWKG/XeEk4xlLZEC6w+9o10UO+C5FM="}]},"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-elevation-overlay_0.19.0-canary.89d27ca5.0_1601947587158_0.013408573308297589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.9ef2e7c2.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-WvYlvK+IRNxQECyQFS1ImLZkCxADXqh59hHrQndXg+CYXle3PoaDViNnZUzX4xb5/L5zFeNEBlLAjxRbMRA8Ig==","shasum":"9ac566d604d27e26791d93db6dbc49577d2beb7c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQg4CRA9TVsSAnZWagAA6vEP/36CRph9V4m2EbJnLezc\nztVgGA0VYFq9co49vTfIi/zE6cpSI6AKD9hWp3a9HKjelqAd76ClHbok0kEL\nbJNhFKI/wyciYgFCdfiznYuRB0PEXmDRGWYIXKnf4lpGwE2KDSRsk6rJPXgy\nb2S6l1i025x+fBBb4jGPmV/I2L6aAYv8bk9tTTXmM8gDkGFdt6c7tu5Z1zTl\nPb0bp5hoLYusRczwWoinvPheO5atUfmE3M3RmOjpqEPIcDvdhxYfyTRHJGfj\ntiKVCcAxWVLRQ9wC9suFBHTopNddt0N1a4KxFr08a7+m74u7Q1VSncWKjRrd\n0ICWznC48IoXHYr9EWjCIG+wl8/l1yHeps+PQ4aN6nBWxIbNGRWrFQDrfi29\na38t6RT1QA9YPDtgeHNciGuQODT0VZVpiERTi8nl213U7hrLjp0uE62rwIBG\n9bI9Bjs9LSxDMG72z5q58QPzTIlnUCOADNAHxdUmPPbLVZjyArGPEcYU92d6\n+rj/GpGsZWq75pA8Z2O1kJGXSw5KVJ3PS3+km69ByhZYnd3dS3aEw9G3LMGp\nawS0yhgnXVjRmOffQZmJhN0aCPJ3mrV/65BoWKkLRZsxhvwRMY/bYir28wtg\na5yPxnnDQWI4phU4Ra6JX3z2Q+pFjlGRKQuZcDbhhqlnPDno6s+7oIrh57KX\nW+Gz\r\n=1OWC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAJW0HT+rlKK4fhOUobcmujqGw8bhB4putuIq1zBX8FAIhAIKErMqNdJVxR2DoBDefr2/xfF/RsphYX7AToO/u+biU"}]},"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-elevation-overlay_0.19.0-canary.9ef2e7c2.0_1602029624073_0.4204580410617045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0-canary.96c8bdc1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-c2xK7CJyfWGM9P6u1StvwhmdRUVHw1V7eQ0z8/sAbi5SLTRuPd5piV0atwvqumZx40/LdbB+qFouhtimtiKYbQ==","shasum":"0b1dcc9a6ece42c94285cd07214880f5f4a4d742","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0-canary.96c8bdc1.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffh/fCRA9TVsSAnZWagAA7GQQAJG5CK51z7BCxlpANrhV\ndeNaKTILamRvdd/dSW9E8yfIsJK5Y1tXD483BPNPTFqFiSn8skoXN/k/kQQD\n4QWGv2hhYrKqXR+GeywArV+rm3j3fWfRZnD9JXhwqs+uH/NaJAEfOR/fhUFv\nhZl8Bx1R958rB10wBCBdsKCQ8igB5SzEcIkxNaRmdm9RoPbamYfrTLWxa1z2\nu5pJxXzkUzcE8odSQQx+TPVLqB8ImSfh1hznCkB6Ozic+oW/T4cApGqEtJyZ\nicIcLPB/zYAJ+h1/fH7tEQla8tlUiNF7cdX2pOPH0CD0ZH1MsF1YRZoVthCs\ntv23oH/zX8Lb+lZ0aH7KgCisouhp2yrZVp0tMA9aiTsxzJsLmYXE39o3gKlS\n3oyQTlm+wYF+AB40byDUfA/wRCG3EwDy87K+59AMZhW9yvYMFnyVxzJfrrma\ntZif0+It7FnER0f9UvLjpZYuYa56OVBHHI9UKmj0FBTDfys38uE8E6h4bgcz\nKT5BBFsilhk29puar+36O0gWd0Leix6HLC/64TU3maWnwxxH43ZWM1014h2V\ncMl5+Fd2S007+mAjaDBONabKwJ8ASWHASNrWws2HxLlUD2ETUi0MKj9CJ45y\nh6/Ze3rgQd4XD7whJMO9UHbGZYfL4wZ7+wgrTQdl+O93ueGLKlZM72QwRjF6\nsIyC\r\n=7F9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe4qz8RbTdi4iGsRy8TW8SEEkhPwnFrf8XHLuaswatHAIhAP2DS+ds4zWE6m/PxRVWdbsv+xnJ4HmjlX4xtkH5Lt8s"}]},"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-elevation-overlay_0.19.0-canary.96c8bdc1.0_1602101215121_0.9289106762344161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.6c21f034.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-slJuO6/j/JjNZoHEH9M8lHCXEOdQsvO/sTGFrY6/P9xlbCG6wODCypVv1pui9ZLKkG6ZxqZNLNItOJxVJm4XjA==","shasum":"2492211b2dad87223321ce980b44bf8bdd370110","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.6c21f034.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkFeCRA9TVsSAnZWagAAVSIP/3eDP0oSPhIglCasiBy7\nQd0ifO6Dl1qfYFp46Y7vCuYy84wvi2Q3NjrpzmhxPDqgGdiJnnHgIPXMBMXU\nc4W526WyWLL50sUl9lungQi0G1w1rrjVacOmBRAwQRm+zogMu662IBdpD+vU\nwS0MFmtIyqbLiiJr0+GiZ02X7tTlB8slKJge3BTT49ukPydS5agjACkjGiBo\nm5YyORTlN/hJfhEibPujm9E+OcqvzTOZmKTMUPjwsL2sYMLaWRgcjtHdLq69\nEpbEsy87yYcLeUlMTpS9qHcABmGLz0LbG3wXg4qHj4oWhOeDuCtN666ApYrG\nwk+SB9BgqK9cB4KgLTjfoEcnVpWt1SQebnE8PuplXZVoZ4P9ZrX9AyxuXisQ\nr/cyJY7GWcEd00QbH4Ey60LAMnhtl1O1nvlzrdosQIEBjyaqW/KIOW4bjk6f\n2n7g0CGj4onK8W4Gjk0jagUC/AnSwmL0d2t1ZkMJ5BiGq4oFDtkU8wkcqXk2\n95KMlV9t48j6Scbj6cIAxSGf2i/xF1/vxH0N+QkW6ZCoKoEwolKwTap6qqY5\nhegzPkFsqE6ZkrwbO3Bbk8e0lNBJiU88uPk9TidRuqQz1x/nbVTxsVWSo0bt\nPtjpwhjk8L1ocgm0n+j/2oiNXFZmn/tqSMpJEtkjtX7SW3Lbk2E8QsAovONx\nKOQd\r\n=0SL3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKsROcuh6i6nEdOFLXUcyJNIgx33cMUKT0vj0Bi1mxmAiEAp7FKoDHxyR9wUrB0FQ050C9kWIf8VWfw4Ko+hu7NRiA="}]},"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-elevation-overlay_0.20.0-canary.6c21f034.0_1602109790309_0.18904739276472027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-elevation-overlay","version":"0.19.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-L1+kZEFzpJ1XNtUOQ5jFindaNVdTSGgxSakixlaLfjXDtTVlsiKiP4Ipq4cKshXqDEnfjV2FJtwa+rSPHO4xEg==","shasum":"73a6149a9198613585d685703b0aa09ed8ece590","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.0.tgz","fileCount":16,"unpackedSize":495210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIiCRA9TVsSAnZWagAAJkQP/3R539wmkdLOIMWT4Eg2\njBYsNX+PmJWxBfbfHOEalCxZWRgUgd6Es5VuKk6l6itiCSkpHpO2Lr3A2v/F\nImZ0jt6eQDH2cGW/EF8fPHM0ocQwgT3GuKtDOXlqrv/iyXUrcQKyERgvM1Jn\ni3ijE2Zaim9q3rYBm2LbKHdxPw4aOktUSs/6gek7DoPkxJPMIDsWv7suHLCC\nqEoAhCb2zFtDMphEiROFIpMalfhgOENKdrxse/g2loudeKMK05XavARwf+jr\nSwn0xNKqUbFWtZdbE0QA9KsRBOVVkezwn8XpDqxYyf9MdQvrzG7KN1ftY862\nt6frP3R16Fp1bVnFGSWvmcR8uvmR1Xl5j3XuTkVCZ5CGSLq5ozI63jOLL1KH\nPSbl3/o4XP2StIuS1XFiOywIvKzI2+77UIqI4g0bDvRdkRj2Jy0lXwLS0UWn\n2mK5cP5T8WTLTP5pFVYksVPXbAqHk/tY4+WBaXsSmnYF3ian8IFm0t6b8Oi7\nxjP9miEJ+OwJ/KMQPJnWKztj4d7FI+RaRa3uoGGZwbbbDw9vepnoWYqTgs7I\nC5ZObZSdcthIO1yXAG2CeRT4DSSib/sHtdyCwIXX7UUSeZMoEgpvIP4pP5Qe\npwB+uTc88g6bp7lazMSFrQV0xiuYYe6dfVAkToOPfxi2KVHEZVsuLB4SZ0Kw\nLFyS\r\n=TtnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmT5JSbve5gfqLC4VwKvVYvCP0/koh6gtEVmGgePvrPwIgC2shXStVGd7R5oh+ivGxFj73rz+hluQXJr0ZepE/Jvc="}]},"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-elevation-overlay_0.19.0_1602109986346_0.9464425794615416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.1f026aaa.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4u0ZPV5GXc19iYwh6AeLRumv75piJ6oFbEOO6Cqci2cVDV9XApdDH90l0BSo5ApF+EVbPro37wmozXJenKt8oQ==","shasum":"c2ed649ffedd6860d31c92ebf209b12396be4fd6","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.1f026aaa.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5hKCRA9TVsSAnZWagAAFWkP/2ub6FmWNBwGxagpPwNZ\n6gg6V0fdoxLyqv1jyiml2ExbEsxLKUYbqHwYqpl1z0JraYJsPGMRp/8fetJl\nsv5p4yCXEkytUEhbpykY0DEg0rTOEyxW3QWyGMx/OMAnsYQR5xfx6kgudCT2\nhbOEv7nAPe9qQKd19eVUpmt7+X8Q+Bwd66HghqpWxNspnTjRIakG8wQLfIuG\nA2VyhtVBsaSm/t0cLqCPed7ANV7Wy3x7aJb6vIZcMf8uZPA0U/GDsupzxRBD\ndd1xVWYRS/63XqKpkM7ks4dfk61YfWDb/4uqSUKoc0Uh9E7Ubf1OkQ6CIHeT\n9JPPYYb8C4Vx1+UFCElJzmKwfKOH/Te23+XzfkkLV0JXbCqE1PqckRitS4DT\nbfJJUqg59s5/t8mbAz22ckaQUWxxoHQPic8JIIvJIVw3pDFwRvmyh3yrukhv\nvQtPreFb8WEhTNXUxkHIhkb2WTfasxrgbi3EdA3ZBxI/oZnpy6eKaQIJCNq1\nEgMf+9EY6cJyZV8H8ve2pvgZd8SBIOeLaJK8CzDWCVAM+n1kI13scZ5hV1Nb\nzuzqm9wRxHdfyRiEhWSdxTJnMPMEXH3eKNC90B0N5kLVAt0/w2sTMMrenJcR\nWSwUNkoQ9KBtOf/2ajWba4qC0Vpox5SBhsvwvYDXL3FOjIm90sIT02H4W6Zm\noVR6\r\n=+qkz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbX0O97CwDGtHvX5PEUO9nql9+xHWj2VED83mQdbKtnAiBzd0e7IOhJPp3Zwhh2AYQ5swyjYTiB3FFn1wSHE3VqjA=="}]},"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-elevation-overlay_0.20.0-canary.1f026aaa.0_1602197578248_0.033973952530745644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-elevation-overlay","version":"0.19.1","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-ies0m5V7F7IVqLTLSOUziaZXW/HEvmgt6IpYbHoERFCipfHfimWOgrGb2MK+PpDMrcmWzhTDngxZZkMNXrS1Hg==","shasum":"999b6b5af4861877ffaf77de88dc11c38dcc193b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.19.1.tgz","fileCount":16,"unpackedSize":495210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5s9CRA9TVsSAnZWagAAFr4P/0wLUEPry6HHZakJe8xt\nVJ98V0o2OrHV4ZQh0BOiJ8h/LVMT0oc/rsFvCg67ZRlAT6facjliJQK4txQd\nGnYje57Y97Rr76NlcsGcF87sq+I2uNYE++jglcLWbJNwOFHRjTZBwmVhBRfD\nugX2jKM9JbOjp+mQRoYNJdzOVGoQoPFPge+TsqyRiBe5pwEl+a2D5ro4Mhe5\nDL5DiHkE/eVtis0VKv1iaGQHEdHUpy+qKVKhhVC+SscAwm5F8bpKKRttM8qq\nUZ7R5rYO+OqXYRTfS+PqpJgKB17MH1gpSdOrUCxXnlq2GeN/lWN5ZxUo9AqT\nzTu5FvWlh2EMSaLEtLRmVKH4OjNo/Or6JFmTyeHp9ly16CzhCpqugZ6NbKzE\nEHZnR6bP6DXNCrBHkgRtxqLKrs3HHAadAoQ7E/5MKgLMPldtrvxwuLanqcAY\nBP8Mw/yYQ/Ijbg0Q88dpR/o1jqzuPgDkPTzHR6WY7fHi1JIvLF1lTzUGJyFc\nYRZhr/7+CMAlHlODFDUc8b5THMx468G2FWUoQ5Cf5rbOczs1UIuDptHwBwjU\nh21paDKG7G6xwRdMC+xyZxCTlDnlkHRBm/g0Fl01gf8kqmnVD34ceaj8jrkr\nE0Gzvp7cyT4KcGJKuWnBmSs5LRq6AreZLAhHJEkK41L0H1TS4QH03lTUGYL/\nUfhF\r\n=DzV3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8xM82+TjB2N/VwSrNgMvLdrHsY5+IXsNXdcqsPN1bEgIgMTPX4Xd5mv9+F9/ODKTEcRPJgeP5xZhjufj8Y36OlD0="}]},"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-elevation-overlay_0.19.1_1602198333181_0.47293455215422564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.5f6894b1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-73yiX3pCMMJ3EiScw0PNAGKF+eeU/6lMzfQlsOLFbPLI8DhOqwdalR9mwyJ9UqyGNzaiQFHgWeo3S1qFFzpKEw==","shasum":"e16b63ac232676e1b7ca3fef85f1d314712d2fc4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.5f6894b1.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5teCRA9TVsSAnZWagAAypQQAKUgemib9/BKfbMLgBc6\nmUGh1OWhAItimu4b6XSSnEFPAokXZm0S1HuYry5GuSeDNUsMd0RWnPO90g2C\n7abXeAEE9XKA44Ju5Gc3nEc5Tio1GifWfs0QiNHKrQt82fc1tMdwAxz8OtMR\nLE+IYyoMt4yEUUDCCtUm9oqq+VvXaEA8eEqiaxw6uOAaKeFCEniMLeHEzplm\nO8l3Y1Q70OR/334WJ0+Riz2vzjjfOA2+/2DGiP9gb0iSoh7uheX3TAlCH3cR\nWMEr82GKvzkRPs0Moq/KvrSWltcCHsyYEyVqcq+1eGe18wNQBIklzwhEpN9i\ngr0FXIMEg+6UyzRBHqXQ1QDYvlgimBNDtTmestYcRdL1y6lWUXrngre8eqgT\n0xNRk57wy/P8vJjG8cRAKKnwtPCXvqx7brWVJ9Dd3K7tLlbCR6O0OCTqAGIO\ntDDiixKXb2HshRas0Yeg1KDavW07ojcD9amgfou8dWvrWYdr3Td+ZQTwIINx\n7nw0xsGnBE/AoNMN3K3o3sFdjr3mD/lY6OWI7SodLDQDxzeYqAbn+ANd5EVH\nhAQHvl9IIPuYL0Rp3UlVc78pkaOznzIOyBcdGVlU15MfJNEEBedzY0ZAYr1f\nuZbgrBkTqOIGUJc1kbKbscThNAYp3msyxMSiZ4ZusNgP57ZBC9Q3j+EbU6Q8\nyCDU\r\n=1AQl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8EVsBOvQFrw5l3C9EklIDrEroCxJ+kIVs/Dby3Mb+VAiEA9laPM7wZ/ur137JuI7kr1kaxT+ePv/gbTLcEsLBmlag="}]},"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-elevation-overlay_0.20.0-canary.5f6894b1.0_1602198365827_0.20531581457404124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.f6260d06.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+l1Kx7IzcIXu0Fo/Qq7JBQsLgiavbFKrcoyn2wWb8k6jCd7uZgflCb39HRE9RKMJhlICjM87zVA8AYiqxIcgnw==","shasum":"a13f12a1ac35cd8a7e493c966658c4b7a28e3908","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.f6260d06.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnCCRA9TVsSAnZWagAAPiMP/1RwxBxh24U7cfdeSA3V\ncD5SyMGg+2z5iduZEkSFU0IEtJROsrneQsSDB69H1nLhx3XR2B3SIyiRezQW\nzYrZy/FAjOmS5IO3sLM33G4vo5K2CqQotGhzPkPS+B2cLQjPP/SiPS+6wbSZ\nRdxvg5IEw1UTzj7noESa4DLJe27ioLG1F9N4LXng3FzGxDCWkRkmLdVu/oee\n/JlozJUk1OYS4Hj2CKEcC5KEnAUQM+Sl+em5LByp4jFXWb1aUi4rolRHoDD8\nXPaalstgpbBodJXdZYZkuIEcozzN152w3b1V7djfQJShgsiEj+zWhNmYCuPY\n6l75C0gHwkmui1PyzJiTKYLwVtDsnU3VqI4IAomAjtcfHNK6zLyt2adzkN3B\nw1aeTYZJ79ME4Gf1uZwLnWclZaE0PPtlbISjd7guAjC1bdOsh7zaYBEGwyU5\ndKa+xrU58ogL8qprjjplOZXzSWhd3co1Sb+7QV1dHwCa6dWSvrqMPGBXkonZ\nmbSBSgXWm72EKDxnxvcKObFFQxCAFf6JcCxQupYo4wRuhB783pgGBfaiYINz\nGgr6UpyN1qmGNeIwmAKz8S3PQ3bCalg/uHRcq0LS3CTZLRJ/R9z0vmgYxSsB\nFy728aMUPGcQf1NrDcEL8O/BLcZIQN49e0/gRbe6Xzyg1Rrdw9ErjRog3kIE\neU4y\r\n=MPfH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIVYgnYH3NGkhLTLdu4GEKD6W9iQz4WhyLmTU9B0BBXwIgCrs5TiLPhKUUn1iqGDn/j+BRotp67IFSWFTmf4rUMc8="}]},"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-elevation-overlay_0.20.0-canary.f6260d06.0_1602542017612_0.42441901534565574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.2d1b08aa.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-57rsyx+5dTDCMKwmHVJo4P9nijarZxM/eYux8OJX5mACP+9MhYNtU2ZYt+VEiHrAmymwzhXR64ENhyYvhfC7nw==","shasum":"e9a647acba3dfc0d772bfd499c2fff276b2ae605","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.2d1b08aa.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf4zCRA9TVsSAnZWagAAsmYP/0QS/ogSSKRpB5YLfKnX\nSWDbifgKjafLkALXp9+53NZtFaqWlgmIEl6Dma90EwO6JNgB12Z+UvgKyXGN\neeUAiGJBEOfoSk4TJm52Hl+1y9LblW6qtdyRbbGZfzWx8fYLgEi4msmFv5a5\nM4VYk879EgqiGK450idZsc6RG5MTp8YFf20Y/lAbNrf+nmMDKfHmIvV8lJRd\nt1w+GiPUwOXCbw0G904PxvdjNNqtyqM5aoUEQvl1NhWhjymCTuk3N49PPJ/P\nIXdg50IkNrVd3Y3OlElnxBUn8/GrVVuTYTBoP2VIcl0GZsUy/cxHgsi2Ip+s\nKTR3HxGjZHCHnH+1ddE7paOg5QKPcExQAEYbzGJuQnrYryq6ZIb7T2Qeg071\nZCUsBalYS1J2AaWtmwXWZi4st12/0JsUQ9ibOjqMjQnLG8JlYhQdaPd0F77Q\nPfzB9PV9BMFNJ+Nd2XMl6KV+OQvWTaVBL+CpWl9ffoYLTSyUfIBEShFa1Ssf\n9PQzorV9rQ38BxjhAAVigyFbiffuos/Z1ckgVYIJUPuzwHRP1L4MjNpDkDB7\nsnMCgnCAU+SdaUqukx8FqC3R23D62bPmJzDEySkZRlWUdij2DKpWjMG7iZjq\nFoqjlEuv1vLgsH47Znz4vUgUoeTBB8Zv0u3Bod8M6LmxjxFrf1haE3rAAHZR\npd2l\r\n=yY3X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB6T2vL+s2XXg90cBFtbWbJKPZNE0D5aYB2PAyoD2yrQIgOWt6Ngdm1146h9739QpP2p9Eh6ib10aoeb/9AYGCwu0="}]},"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-elevation-overlay_0.20.0-canary.2d1b08aa.0_1602616882810_0.7425501382521669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.5bd58844.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.790ca85fd.0","@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-b6sWKuoLQJjYNOfJwnQiWSXDXo8t7DL2rJLJgVZN8FdcFK7ufl3aMa4ij+QgQkfzNOeDPysw+8+JuK8/9YKBRg==","shasum":"85472601f0663ef6c3854be4f5515cbbc86afea4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.5bd58844.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjweCRA9TVsSAnZWagAADOUP/ApO26Pgaq5k54okEKhe\n0m5gt5gwwA++T7JCzmcGm8pa3dltlC/ckjOtA6QqSx5sP4OUaEVF74EsSwU6\nKYXajKqtmus6JHB3dzrH4ZGpalMIzk0ZqJLWv1SHEPnRBBBnpTas5mJfhswz\nXXE+RFlyFLeStMCD7gW58Jg69awCF26weQrb+nkRTq3LkcQfXmmH9h7nhR/t\nksOItuOE6fLbG+FRSyf1wn+VZdi/OxsR5Flxwwcbk8yxdGHPBgnoWDkNCvHK\nZfrsds3ug/K6HaND2qGI4r6qXN99ySEdpncYRYPVa0WSUqo0Sm0eMraKyZNE\nKM898bVvRwvf4W+XB+UPnfuUGVi5FZyN1xrL24QO7ZCl8YcYupsSuzrRJuZn\n1S0dQOOB/ecEPfKaok3CZxnOdTSRTNM0kXizj4NQMJ7poGb5d04Zrdj7NdAJ\n8Z7EHz7KprwFFYb9I97ALioHQaQvy+yZqpLmse73FUkYRhpb6DsxMcvJ1Rom\n/6IdI1dwWlAIy9lrKKclfzxgmCOPIJ70EJeA+TzWRMk7Pvblhfgi4vY/uGNe\ns6viHOaK95SF6zAAk4k8ahKmYb7m2CdwnIjWT/sX0rJ70YLawEtCVc/yjmXi\nJgSNAS/OiOKmpYrlqJbxCg0D/nVwFydoInQASj/bkBEhPcSOfyXmvPCbZ3gl\npzY7\r\n=lvWS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqRGmHNlgV/03ghR01fozjWY7RLZE5+CYnyP2uyAUJiAIgY8N2WJXKdV/1/4wAQ7LG4bPJRSPWR/aEfoprePiViSo="}]},"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-elevation-overlay_0.20.0-canary.5bd58844.0_1602632733818_0.8322731938849688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.bc846b29.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-bnz9h3cMcNcuk7t+9YcJE+3eS/qUJJZi0STKil1hLE+9rjS+AGaLi00LON/uPiUmc0aTD+w/LD40coFTmGXCNA==","shasum":"777cdfbc14d90facee334cb57b6384d6d9dd8b78","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.bc846b29.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0AtCRA9TVsSAnZWagAAci8QAJBbODlbFavPoTzT+fvQ\n3j5dmLyAhZgHXzRmMXUFXXZ4pI2OjIqjqVMbTgspJbPSz/I3mQwjgEFcf8bT\nafLBDZOtC7e2YjaglKhXN3eWdklso6U5l4/4CR/HjWXDNRJYX8dLfulOn65b\nnGxsRSQ2Cxaym/IlO0BvzxgV/S1Cu7AD/OPAMKHAog7L3y2dlsmI54gAZEq8\nRzfarHRp99gx/mPoB4pukjg/1UxzTrUkB5AqxfdPCrxJuZ9uIpOas7mE+sD2\n5QDM9so6eJz/2c+oVZvbTOKClornaCqfO/b7xwumUxHeLfbAlzmAA18VdGeF\nu0ZMQlAWLd+Th00R8OfZivVC9yyHrYNz4/4CUwdpzYLTDMi4HSiK651iHcpI\nxa1O4uVEMxq2i1vRfA3shnnZLwLDsVX08Jh6m/5dqUPysz+dLfML9sFsAIyO\nzGdwQ53Jyb9sKaVE7j0y/fEEJxcYBWcRsT34u5A4tfczgaNPmyyO7UTOWe46\nfEn/3HS7OJpgdp6A0db5GW/mMGVMeVpPOIXtJRFjO3xRE8eTJIQfjLz0G3or\nLHXpDVNxsvducZb5Dy1X1w/BO5I8yo0VQEFRDnAwdbqClxFEKBFy3BJ5/DG9\nd4JxsPFHAwgu61yPN/40tfho5HDS0RBwP6vqjJkhSXhF2hRapKXjhbORYI2M\nRuqw\r\n=QsRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2HZSwY3tabVP/ptETskXtmK2chfe5/EjdTOY/MWaADAiBLlA63EPm8hoB/AqfXjo0etnc7fDeS+m22k0dcIieVAA=="}]},"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-elevation-overlay_0.20.0-canary.bc846b29.0_1602699309013_0.3641928176632496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.3280b686.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-5Z0qU2mnUhSRKI1nADIy48ICh2XWTD0jxqMD2IJERFew+04rL47HoqNMBzzr7vajbVmcGsP3rMHCjS7tR15GmA==","shasum":"1fe2888d85cb29fddd0772111831764dd789de08","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.3280b686.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiONfCRA9TVsSAnZWagAARu0P/A3P0dfzMCbi4pKOqR1U\nACVooMvxPFIpuofIVtdRyiSyJ5CJBnyaTmZUxOo04Ewc2YYZooB9ZyzZg8zy\n+l4ZoTF6yPIwSGKQ3w4C+mH37lJ9FW8wZFD3Ry+GTRY8AXS7GK2n3+w2c2ok\nMWEW7ApwSXdX9eNRq0iJNori5sNZIwU279Ol1fTlYwkFRdWvubGouJETLoP/\n+XHOMdDoTvbAnfauw7DQ6BCilEznIC6z3rsNqXIF4EY9QXWhr+96gh/CEQVz\njYZpEfcSYFnCxJNiffOo20oBBMreJtgguNHfVq8ySqQ6nfBalaoKAyLbJEXC\nPd9ijUa4ExVfueWRTYj7mjqUuwZCC96R/9Rp3sERQl2hEAhjSmxxBGjEskXu\nCApF7eYnOsh20YxoymfKNvXv254RGftjz9S0OjgMI5rq9YxBPnbPFKIYedTt\nYLTp85C3uXsdTmzcUm913bm7h+aaNGS3A1/5a+s+WLiZ2coI33vK1nhJgim0\nEe2qrOf/oes62LJHvNsTGaYnyZOyskouJnSef5Q8TQNa9S+i14OiaVKCvGpu\nzgJI2s1wHIbSO3W+KNBLgCJPMdaUrw9PjwnSf0Tm+f4A/eqN9Emt1hT+l+ew\n1syLE4r+3xkSR3FkGUfdQwZalIel5F93bFkK67B6WmCliVVi1BoHpsX1odrj\nxRJV\r\n=pQie\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC//+JBgMr0NFeKTSiGvn/NxkTBn+85xdxHZ0wY+3P+0QIhAM6Y9BSvQABarn4eykQb7ezzApqmNyrjPcfyRS/LCYdD"}]},"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-elevation-overlay_0.20.0-canary.3280b686.0_1602806623104_0.6103807385312703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.9e94cd38.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LM6bZGcjv6bhGvZa2Dh+JjqfwSXZq333gJwl9zKa7lysPXUqaxV7bPcbWin21SxXhljTuKV/ird0Wzlszr68yA==","shasum":"6bc45cc7c76f9a15aaaa45a34e80250319d343b4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.9e94cd38.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0HCRA9TVsSAnZWagAASqoP/17lN8kaw330+T4wCESw\nfabxuPfa8m4nZfaJz7WGUYmLbvV32j1wm2q3xntzR7+iV/5f/BtGqzXso31T\n2Sf57SSWmaR6y89K91URtETykUN2uBDcY/5/c87cCBxemMX/FRetHOfE/FUA\nNTTmmDVehjK+73b8WMItsDxX0LeMPf3cC4gLoRouNeZNModXVoPvyev7qcti\ng8G0mNuKRYVo63qmPN8kmus1CjamnT0YNCAsS1qJ4Qjm17wuSKZWnPiEhzlC\nE0qhQ5+gZHsqvxxJfREw1njYFbuQUic6XICGSk8Ro7NmiLJCL+GLlecV4SKR\n1BUSFdLj4/ZLvxyoyGiTtW8grGHSW9NaDBdZH52s4E+UwagzWMutFh9V4wCR\nD83kSnUu95uLkOz0/O1GpvGYX6FwqjKxkbTxfpqQS+35ynHd7o60eytEguc2\nv+L3Gpp7mj60/pke0KGnNsXYo3JplPzbiQKfTx9hUPz76KrqIDFKY4nBEc3d\n1Vgc2u1DD91nnr6xpzrjIbcM/rFQ6lXOW/2xcWSE1e/D2p1zpb75G69fAaV2\nXSnuikrCiaImdRSGsTR12oNMFqyhATZDHsUJ2p8S3a++4XG//u9JriPT/SeC\nk8H+Z1SRTYKB5ERPvAq7t2dVFzrx7MYu8O7hPOHCvNEKRCOl+IOjrgJL+Goe\nEY3w\r\n=bWB6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeoaLZaYGhffD97CUY0cJOCD4nI3bbXQzWZZGiaWVEAwIhAMbMowWP1W0oUA4yNWnqpWVvKBxpJAjXhnQRl+PvN20Y"}]},"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-elevation-overlay_0.20.0-canary.9e94cd38.0_1602882823188_0.8921780797705476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.4773c773.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.2ab716cbd.0","@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-hgUIq1/WHKjfztKPjMk6C9ohO9/9ww/hLxIUtsqxCGO0D6K/igAy+Xl6AJ3MeN+1diQ1OHDC3Y0o9J9SbxGbUw==","shasum":"54c0c4f2232c41237b8cd112ed4135ca1d5d2e70","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.4773c773.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih+2CRA9TVsSAnZWagAAwf0P/ifMIUCwZFAMq9L4gwau\nGbI3lsIjWAqxDmTxyfUZYx2MftGOPXpWRwvedto6cYStp+qnmkadzj4y91Ca\nuWanO6A+VublY0IyTHMwisfWvJns1b2rqAbknVGAkRLIRowbwR5bf1Ras8kg\nPQiEDwjL4KLCxvpVkfYhPAgC2mzV8ZoOHW4CE7+TS2+z03neHNIZmNSV7rEX\nQcPZX78iJ55tw4pJVW+yCujcxq+Cmd1sWYwI79XcFcSehZgjEMncugNdrKkW\nwzFrE0k7hZwvPBD6aaJ/gH3bzUTxIz3FlYDZJ/cPNXEPSjSX3hvS4EM6iYxL\ntKf08KfHoG+Vyj6crBS+j/ZIgeVxuG0wi8xxgRgkGl/r93bMOsaS6lcoEBcK\nYOr7FZsw8O3qvHjyAJ+rJ/DLyhcPaq2TcJ5uMD9naO+pM5SpncXXLo8kjOJ2\nFWcpJU8f2hhkAiICB46urTTmMGSt/IVVKkz7kf7Ei2ZhX3VAZ1hl+1KcK/8Q\nW9vbl5lqu0ITryQbyM7WI1Ajt2oMmjubglk8mlN61PdG13I09uu0Yt/GPagV\nJs0+EVmlOonpkiy1p7Wof4X9wMltEUhIC5j/cZ3V2zMereTzbqXPT+B/L6K6\nYSmLmY/gCW4C6BL/Me3nnUIzEom4zS2jKIXfBMW4VzW49cUK0lFSBwvvhtAt\nLIry\r\n=iHcf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHHo1UCs5VgsV457ek5th+zxsLOg4Zlyfci9h7cqXktwIhAMynR++ZynO9x1GJO/wbWuobD4tbv7+twtcLhGNT+zDD"}]},"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-elevation-overlay_0.20.0-canary.4773c773.0_1602887604377_0.5561040719115895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.65787913.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-9cb71crFi8DgOlci2THoZmWiYuBSLOWS2BtkdDHxKzxRMge6aFYcXWJHjlkf9QUd+QBJWzNTrYikr9IN+3wq/w==","shasum":"ebc90ab8f066ed371f70d636ecf477ead557b4f5","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.65787913.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjd/kCRA9TVsSAnZWagAAFK0P/0mTCmyjhBy4U7noBwcS\nMjx39KdRzBoiUb54tQ1vX9gQEiohUo1W40jgZDDbXFHcLdiutA/sq9wiC+Y+\nx+fCjps7npjMx5bMgX1GBYQKHng1A4/WFEu6T9pEPe5wh9eS1eAT56gk5Gk7\nCvYtLCPxbPKzwy3Fop7rSlV2MpCEpNqo4eBFE7yfrRR+v+OPlpFi4sgc+Ddq\n85u8mkFf5/mBm6rktk+JH1OC+KsV0DqWTMzhik8kgY01h6Y4ooBV7sjHRnJc\nHoBm30qxWVDILEGiBcefjRBN1dA0I1+4qEUNi2rQXglb0Ao5VBRgigYtdN6N\nwm5EBZ7Oqs2+z6EYZLNdifjZQZFxkex38T97yAENREN58FVLIxYmqxIElO4l\n2nuciruDYtxvxX6lKqOMlqH1uf+ezcVXGT+SAaQ4tbLS5hJYNTDLpUV3iTxw\n6YA+GCDCoT+lDeyOtDTa+aZ73LsSMURzNeWkw+d/JXmbAojSDjKU5R6czTgb\nJqlTdMQJPumdC+PSxGpvKb3sKqyUqZeuXQa1TRPbAdKizJuQkSoiaI+3HicE\nFmVqJb07+8uap4fwcOpaHfJkFRQW/T7akhhZmcpJVT7QoK+TKBJ/PePdNfTd\n/A0ij5L3NDdluiW+/e3TF+F3+5ba0hJlkzdDhgj0uq1reQi3Zj5ImdTVkxfu\nwxnX\r\n=h0Gk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFomMXR+ZEBdb09TzYMR/Ub/HIeZHn6+BqgL4GnhRTbaAiEAk+TmcB97GJZXejkD+lmgwhZHasYDdDPSu+6sPeqFKGo="}]},"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-elevation-overlay_0.20.0-canary.65787913.0_1603133412017_0.3891981188536815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.5485fba3.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-TNb0mq2t8DhFYe4UwAXKtQzorCh2wChpu7YgyAOdmiUqe7X5C9SpmYYyaRIGCfHFjcMQdgbiBJHsaI2DvTWpIw==","shasum":"defc571f1fb1de55131144fc26cd96e4dba4d8b1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.5485fba3.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgPTCRA9TVsSAnZWagAA7IMP/RwcgDAvAe1rshvKJLDs\nieX3kegtj6VpHdG1fBlt+MVJwWAuiQ+dAIQFlpntq496sc9M2HczjN6HqHMK\nzXhbmvQazqBykr20wfSOdMsuzN1L92W2lPq+ePxAYOJVtzDL2XHtnrjZLPQi\n+g7MobiuZkHdD/1l32L/7NJhRrbbbApm+HgRU6052tFZZgLpOS2KaCJcaBGS\nQPC/TTNG+x0I1QbXAIUa3pDCI0KD/CetWB40J2CxNpTnQ5F3E3cd8Gd9u9ll\nfRSBY2pLydUOFgGvPhKmooYTfQr5d5b6H5nFXlIKn6At5aGz7EAJkupr0AxQ\nwhOJzGL0+izi2REnQu9938hF0IVDLZquQCsMZ0YDjP60suJ8hKc2jSEhwIR5\n5CuabOXxiChnONuc5u/IZlgKi9B5gmmJuFqrrKpTh5Ey66DQNkMBaTv4BFCH\n+IE/mQ14csZO+Bycn2OhQq2hKw/D7M8R6pQZv+10ENJHVR/PSpfk30FKxdPO\nBtdRMiA3t867II+cyICFH4ctz7iF0Zhap99IVUWIv7eU0ZRZMxBHBI5AgAib\naoMVODj30+SohxoBsGRnkbp2saezXVahDN1BislyEk0zqT64jwijXyQgdCUZ\noHGNIUzDp6bFvYky3C95MAIdI4Ig1y7wYyjTBlH/LPNt5XVHxvbvTc7G+ALs\n7PPW\r\n=mu2Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUpFnOwJI3aXhuZjMqK1tPsl4PoHwELzl8xZl/+OVBwgIgXV96RDbOGf8Yi+TzOlfum0xqKbE5NPvOAc5ngTfSE9k="}]},"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-elevation-overlay_0.20.0-canary.5485fba3.0_1603142611055_0.2969504158394929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.a39d0a92.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-jUf1s5aKvIFQ+mLZ0pKsAJjL17KuEyabMtOSwhWJJksgv3BhAP96PcMCnQV9CFexGbY40DakCV79Sz8Q7gOW/A==","shasum":"bd9646b50dc5b5411d4a78be7b677f9de0d24410","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.a39d0a92.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0myCRA9TVsSAnZWagAAd6QP/jrE/C5smEecRlZhXuLM\nzsPndL/7qm/jjMxXSORLZyTHSigWx6y7eJdaLTvHAtbuOLwhfSPhy/izdgXX\nHtktkGev7oj0612uYHpXQc3MivFZdW6Te41IVfSZclkvjhgL8k8z0duJ7m+n\nQoT5NeJ74rOxBKkTwrJeiB4+x+jaT3hiaZYr/RogPsWhRS+vapeRdRTzjOw4\nHT1bfS00anbtLjSOPYd14KA2k6vNmfU/alZ3AP6ijNQ7LSxT/4LCV+FRGmBT\nmjE97Hh2WAIOSIsioH+hqyPiQvospistSCQmRDUw2UW/QBAkm2215fxT6VLk\nF2hP+p+HgQLsg87Ttjq91CZU9V0zFSc2EvK/55PZPzstLr8BH6viMCV3VM80\nyXQyhv2uq3rDsGQhsOi4WLix7lgYYVlYBPWkLS5aiAIQn5EzECrckcIgx/Wj\nEViQyhZbAqdfDs8sb6DfPKxPOPRsSYW1JOnvxE6L8zeVPsJD0ChwQCJKxiK4\npBSfp/XZIlHxSRfAzzdm+BvMjI1lvMwPkXWxVRQaRAlmX3BOm8MwfCb0GUVs\njHfkdckGrIW/otDWU+GZktBfbksG6X00tfNEe4Cdp7AT9zilIH0oTmEEVOl7\nkkZSYRKukATKxkoOfxUff5fPbIDsAsNTatjFF3D/AG5LCms9+yzCcS0+kn6Q\nStco\r\n=I+hH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVMhsFMVndC1qkBam0BB75Ezurj44COc5TXNVibaNNSAIgNR0TgXpLF7K4oDkxALrPMsmXpEgMRKFK1irxH0EA3qk="}]},"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-elevation-overlay_0.20.0-canary.a39d0a92.0_1603488178492_0.6526034907330993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.4eafcbc1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.ccc64eea3.0","@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-OY1qVJRQ2UsNNZQ8evurjOqUQdy1hc/uV7zIdv7f4rJ5zUtCe5krkP7V4/rv0L8/GdSFa1uEkIVACAaq1FwrBw==","shasum":"d633296c18738cffb8f79629f4a97c130330c845","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.4eafcbc1.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3XSCRA9TVsSAnZWagAAfLgP/2871ZDKDr1e+n8V4F5/\ncKtZZtDPsPWsX74TlAjAbmKIeQ4GmFjb4VNdigDiRwu2S6pPUEd07xIafyks\n3uMjUhokKsjLv6eVX1v1+x6apJzI8ybW0KC5K+0UGlCEuimftHYlSFyhPw0z\nP7yPEMfilUNNBIZpuSA6VLuCEtgZ/6zkGgo5+1d0L1Jbiw1h/t8fjX8LeusC\nSXYfdPKgqpdI66h+rqS+Ufffs7JK4WQ7nMLjDSdenjqTFFn8MJ3kU3UpbjNz\nab0rjy7iTkZ1p3/KACjMSDOtAN5PaPGT8KzRtm+Q89SBbvjAER1VOqQ9qtcF\nRsxk84CsQADC686SGqXiI0jWF0FKDrnY+twPQ+DbrhceHa/wUoBPJzPV+aG0\nUWdQbBx43RZ0CadXF9g/1KABDQLty1kJ6jy8wxKRe0e5HEH+ruUTdFLGTyfC\nzlc8WmYDlPFxjIIMpUx7rPq4oNw5aDCt8jgLBAWAqM3dA/ZRr1RH04wrbSAP\n1MDndmUnf6lZRPLA2VIoFXinSSflCCBrlJrR6ZzqLuNXA1jGGtawlkStxoaP\n2Wmo4Mx40wm24g8HDmso4MMMqhQ3Dhtw6Aku8PbnlerfUV8tJCCxujOxW8Ho\nX/KKmdX5KBCK/q7/uqo5SQybEkrHdAWBK7y/wm3CtgXli8NJR63jVzklx4EO\ncjMq\r\n=UMrZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1zYne5eb9+CqRBR+VaBhb2Toj0/U8VBWnax1FjqMccwIgZQTC21NP0FeXU30fcJNRuYe+lZkGXm4sEtl0kn4a4xU="}]},"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-elevation-overlay_0.20.0-canary.4eafcbc1.0_1603761617641_0.8468724998067634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.32961593.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/6cqtvlG3vcJ5Y2g7aTgQTKgaHrnU8MKQtvanb0/DEt+jESfy7dIiXW72vTCvQBfJsuAYDnlGrced9D/IA1ZpA==","shasum":"5ea3ae4b618ed2354055d8ac7c7aa08b3dbe1742","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.32961593.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL1xCRA9TVsSAnZWagAAf3oP/1lk9lKELOlZvjr1fCyS\nX5N87npUMxJtaBOcv92PB+ZBE/V113Y9QiPJ9DA4uTPQu8UXB5ieYpDoolyS\nvTqY22p4m3jQeZbxwgFoMX3Hc4Yae+GR6F6oOJJPJIWq/3gSKORmbUsNTxNb\ngQjMuMbZRSUFa0g+3Ib7zrDG8CxYWdGjjYOZx+ahnpveUhdb3rWT3M29dure\nbtkEZ7RfYDQ4GW/lUHB2QNRRfrSJD+WXQaXlUa9Rz+N31cOGbC0QubZjp0LI\nllqQs94+cAiuWJvzw5/LlW31PGkpBRSg4f2Q2nusxtHF8aCyV0Rg2+0RtqFG\njBLfPO/+60OTvwtvLA8UTHORGUBtkGH38zYOFK2iBiTAmN6x2dExt/XHYOZd\nGOVcCX0W5fx2CxFq3b/VONxPkep8zPQhF5wBxPNbOFLAOBNyzZ7IsyLvUcRy\nwDSVPuElMMuQahQE333Zu02AwSAeVIKUwvT66Yn10rb2/hww/lvnvN0QI/TS\nP5+lO11BOta3Nb3aLAZHuwz5/BiX+cizqBEizw1V6+4nVjQlkIQ3mcmnTPD5\n4U99deK7GLsVL0u4VGYBxEbMHRxAV7SiWUDLU0N9Z3FrT9qhydw7Iaukfvbn\n3Rl40URh4jtenxZxpHMxVfc8bMeu2z1ricaxUNKSsGXsVOP7/qJDXFbhwnCI\niQKd\r\n=/bJf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDw0zcIDetG1+MEc2tVxkHQsXUASsOOAzHGCo/nO6PNzAiAO2tQFgqZYltNMBV75YZ+Qm0WYhiDa6ScgZIej+/sRpA=="}]},"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-elevation-overlay_0.20.0-canary.32961593.0_1603845488794_0.788894733951591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.8e3a0601.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-lKvZNbFrpCgJXWtAIK9eIHbuPstHw1WKRjhBAFpzNT2oiQCHBWj7YuR3PRXyDVGqC0L/Zo4GQBpGTekpm7QM+A==","shasum":"7fdfaef6aae49e2573f253b36a99e3565001cbbc","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.8e3a0601.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzXOCRA9TVsSAnZWagAAkncQAJ5i4Y6M99Eao+n1nPsW\nAEd/bInjGsUyGsYCA6cCEzys/0D6Jb3PNXCur4wqNDuMzrEkH3qfocMPy8zi\ns4xfUH+PRIdnDB/F6Fw876v2B6tyn0nkw9COw2vp2SqiV4TOLlNuyfvx1wDa\nfgJnMcQzF+3dfgJKyq2YZKh3kMqOTvzRYlkIeumjycEO0F1azUNShUzdSv8C\nGvZG+6rqRHQId89rwcPTY1e13DEsG6iHoZXuvkbIlNbyqYVs6762eTDsSaaZ\nZhkrmUO37KN9vPrvg/uOohVvfmW07FBJGkRvBslARf9WRrGqI2TCjDTXU0ib\n6meQ0TDZS5fc3XC22WoZqW3+lc92mx52JHJvxXOgU4JWDvC2/qaZA6PAqR29\nng+0ZAXs81cYQvuvgfN0bl1r+KbnTH0G+MNucYr3zGzvBVRiRtTlJlHPhTuX\nII/TL1Fb0829DR1jZFnzkyOjJMTo5osVfh+WZGo1p2Z5UlaIqCsIHJ24uWEq\nG7Blyq3L6axCxYoZFVQKudjTiofNB7i1gUUpfaRcYj87liAmYS3H9YrpRs9b\nFnHUKJ2UE2cU7HR3Ggz4wJp/EKdilIKuePeG9hLJm9MKSC/qRo33fWDyHKUs\n74mpcolWl6HtHDTV27ltH/TcGAPoIJzhiX7jBbRD7yaZFlahQMn33MP7HClW\nPn/B\r\n=FgCN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5hXe9S+nuCTBS9Jy8wGnOT3hjc1t0jVCEg3ALjkJfWAiEA248W/x3HtV3H+4x+lmA6g+GCxkf9KrnWxgVbOxop/eI="}]},"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-elevation-overlay_0.20.0-canary.8e3a0601.0_1604007366655_0.036187396276372574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.178c25b4.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HJSP4CD56E2XEMvsLW8pxMolxoGw7HQxuq6EroincDxYBHOFCfMxJYO6AyOdqU1r3TusqUeQdh+jwvuJkQIl+w==","shasum":"52c98604f8e3919e52a2f5671e5f577f11346fd0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.178c25b4.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzj2CRA9TVsSAnZWagAAzQkP/i0+JGS6TWdBjtien11n\nL+9sGeu2P47Cdxqr1rpZp8D38p8XvaCWCRFvS/r5s6R+z27zXX6BOClXPCfJ\nCKjE5cLqNzwXSQxGTvKokaTfkfnwummlv8G0VZJqo5FPO30N7gyY8hIhM9/u\nqooDbfQ3THq+OvI6NlsvGoeRrUc/nyhz3uq1mMWhzk18lMFlY/7DnLWM9K1M\nNxJIajOQIy1fwYNqNkCw1EPUyOVm1gLai9EPy2qMJc+z4EkdAnHILkH8hcOu\neIUPFUy7+suKbdaTEUnkJE/8xtdPJg3Muy+OqmQ9n/Wa4wzNFaezACuFxF4x\n9gEhNMa9Pu+5hExThbPtDxKoF2x3QWqMRyf7Z/2VVpKtp0RKMfDCP2GL8y7X\n3O457/5VFmJPs5Y6C1A64Odgv1vfRFLEiDgtzVQYyjoYOemQxrW8VWEucWh8\nz76TcRViJ8Ire5d6zjJtyRCLC/7WO9A8m5sJUyhJZci7CJ2zII20ngBe3CEA\nq132bbDRY6DtFqo/iFoY598PQswXSwevtXOO1QyeaPbyoZXIoBqx+tWRHqTv\nWMVTwgLEnVCabhtNUG7AX4gTtrDIUwhjqsY3CYuYiR0gblrCd7ivATyeKyAj\neKc2UXxao6Qmjt/q4RYCdGiI/tJSJ/tTxvn8AJmIgoFrskq2Q2Z3bRLtHH2N\nZs/z\r\n=KSuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDltvEQmB1Qt0kaWb4NxUI5+DRTmw6te7FuBBbefQv3/AiEAjZxHIRBg1d41I45HAjFyvm4YYEqIFzrIVRBrqsmOQuY="}]},"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-elevation-overlay_0.20.0-canary.178c25b4.0_1604008182167_0.8632449238622562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.124beb49.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-bx6jZls6XWkndGnr9yElt0EwyBjXug7AVPW5DlIVPV3QSULNvNtPlBMRA+sWNyOU4MYTOJKANH5bmYP1Yk/g/A==","shasum":"47acf6fae6f73c5b03d807ac8490a907d8f3bc5c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.124beb49.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKpjCRA9TVsSAnZWagAALbQP/ijDCDwrn5WjutE0glAM\nPaSHs5S69w21e5VOCk3gbS1/PyEHzPyO+HoVANwUqyBmOKEtbmLp1GVNP4o2\nIYzsrlfsbUYRXnCDb0D9b2EnGx2fG+1+7RHhIxMYAEOAL1r3g8UY2+y/Dfqj\nS+wZMUG8iWYjWpWLkbvHS9nbVn6YtmsAOr2f/KIJU8bAA7NY6usSQq5CMHlb\nocskilUdtBaAT4WPuqRP/YKvXvLswU+VxmymltC47sV/oVbzi6iZFoF4uxrl\nCrMXYF4OKxyOJTyyZU8vaxlYAmnYeCa0gmOmKxS4XSBeW9XpYYdv6U0c2doP\n0TenDyFfkAHtxcZWTjicBsFqfN3q6+7tCpiVYaJ9eHfYkCojEgijgSkOUNx3\n30Ox0y3wFAMAdj0OjY41yw1y8/ZzoIJKhpXcgyj4eza4uBD1/rwGoht9nxIr\nX23fPN+JAYxWC4HeRRNXeOvBW5KbjA6VBpKo/Fhs8+l00gnv9XiW5gWVeAVK\nay37cInFKsBQ61hUZVLtL+p4PFFL8pj7K94ugmvNQJedwct1Oil37/oC73I6\n0EPbNgOC8UR/CGnsE+tNglMxcKj/Rc7YtNUhb1FDRQkmCLykUpxegQoT83Q6\n4olFTyGPp0E4nKfmXT1uFuCKUhydkgnjIoObhTm0xGZ+JXAddVFvPsnVsySv\n3B4J\r\n=oHk6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdinK1xUG+NmPSfSr2LDp8+2a8js2zce7ssyWizgI0BAiEA2YzZEFz/DWKyUTgXzZrxuDrQBRMQooPGahVwu0at6zQ="}]},"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-elevation-overlay_0.20.0-canary.124beb49.0_1604102754690_0.8511312028143423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.5937f468.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-cng667x8fsxZQ0XpCn6KNJnrSksCiHlEvHi1pfAz1kh7mkYZlao45H4qql0aS/beSOjenSMObJPy2p7f5Kt73Q==","shasum":"c683f17afdabc552616b349578ccd98cf5fd8fda","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.5937f468.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxdyCRA9TVsSAnZWagAATwcP/03ty7VjjFSHHpiyhFuj\nkbt9pThsjUAb8HmW5fPRlbl+5lsDBc5zsccWGYwZy5ba5KE1VdzSDMGKaQYu\n4mBLgh8a/6twQKOW+GWGRplVjl7w5k1zhtuDa+cv4HAZxlLqtRm8c8yD4Y96\nhEw9CIPD49AarWBC/4QR77q7xXtbngspvXqBjKA43jRbnQN+//xZfricL46r\nh+mnyN/RcNa8HJM7yiooXtkNOYhlqMa78gztnkR2+2suROT2hFDYQGCQjwSi\nG9jVvn5k71kAZmBgJoqa0VjK9y0QbvKLI/P+YbtX7Cj0L9iFUdgBiiQIJIjZ\n4Kjv4xGUuA6gdMv78Fx9trb6ubHM2Bh3iFabs4CUrVn7PqPzIOgLnFLV9i02\nhHiF9jxyKH/yQQJ0VGhWq4Ctc96jEYc9nqewNPJZe4LZ1kxpnpZ8VcYeqwis\n6pOVww//zrgGzY3uQz7sXFU9e136gQ2OEfP64a3VV19+3zMeM2WyRy+VXu2M\nRypLGYs3NOyfyNgZb/KAHRvR820nNzKlqfhsHvm/756tPoZj2yQq1PeUgWTJ\nRYg5C8vZYuFKPsDbPVFVMF9vjkAkN+Eo0u/q3UZprDjqboyakelsGG3Esqa3\n0WNYUwhlMmNRlW/ADTp72iqMS/u7gS52BlTLF/L5DVN0LhsmPQZwrKHbl4kf\ngzjB\r\n=X8HF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChVp4EbvroWJahV+MvcCPJtyAJQ8zonGpPCFTW0z3sAgIhAL8uRvf8mLHmPudbVrX8faBERdMQg8Sew1Q6y5+z0WMP"}]},"_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-elevation-overlay_0.20.0-canary.5937f468.0_1604523889733_0.8613176551809312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.a9bafaee.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-l2ZqaZoii4e1m+/M0QupYpgVWLDRrOwO5Zu1+n2wredXEjuyor92YDsL5zO8XpJAYkuDYPnq2/aQubQYhXozvA==","shasum":"85bfe2a804f1f6a1b02f1623bde108620b2a11d4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.a9bafaee.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpHzuCRA9TVsSAnZWagAAlI4P/3NHvQlFQpd3HGrIFomd\nfzQBYbm7chcX6/ReQzCmsrsGqlLAYulgg1aMOauwOnVDOaEZ2ktzSccplt/e\nXGec9f+CYd1r+FgKhoyeT4XyHWLlQbX6hXAacB8DhMtCrgVjMoWjtJTYwBiT\nSHHxD3x9IRwocacZxZ57E4/4VEr5wKXy69y88vocePjHUNFFWg6RmhFqSjS0\nyxqopzDAjGYC6af0MLosiZ0QJn5VH4+uZb2Q1t3U7bxMUeMvo0cvmDSMlHZO\nlUbc35mPtsMXq2nBFXKhjF5S/bVCupVP9iyl0dhbVqhACFRK8OOKgAZHSXc2\nB+CR/yoIn/TOar17IeVxGKHQFhRUmVeoo6B6SHvRCFgXsbKXVPHtF1plttDn\nYX7JV80xVm95LuXctMfE34Z5nV3ubt1OTuA/GliHQmqM2GRC93VIlPWp2Tky\neQlR5b0/L/uldTna0IS81ecZTxEo19H9cgntwld7OYVuFmB25XDFx4t5FPO7\nkjpPMKu9ycxFyEI190stMmv/H/G9Icrw7CzWMcVo6K8FAYY/2jFCT+AcZFVZ\nqxL19cWaBfOLyE7au3ii16WrQkU/H+naxY0N+UCO3JK919FGMGTrgQf6Vxkh\nN+EtJQRvSUKVP21DesJPSnExssnEk89RAnJ4PxHI1ARtQjn4uurLqPI7D9kn\nTJvX\r\n=aOOb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIWRx38txZ/oXr7GnBSXg9xa/MLjugR43+g/jA0mAsfwIhANQXpnULZ+KkznKfGgojLC8xb9WRlR2VTnrvjwQ4j71B"}]},"_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-elevation-overlay_0.20.0-canary.a9bafaee.0_1604615406113_0.126075094429289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.184861ee.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LUEr8ZMbyNhg5BupZGWqdO9UNqTYpFeg5TwN5+GJKoVJ+0nPOii+MOuhCSZ2ny0V8z11zGuO9kJfHR+PLBR53A==","shasum":"67366d99c1403f646ae3f47db6658e2ab30f39e5","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.184861ee.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpewxCRA9TVsSAnZWagAAl54P/jzsZKk5ZTzR8yPhOM92\nQQksVyUT0i7043aq83cRgDSbK/N59HGWM4srW97y9nn7YtJ0NIUpF7D8EXPh\nFgSLCISsY9jMxy1eNkPheOk3r+ITmhQWxUL1g/1atE4zFEeG2ORkveRjO2vV\ntpJJ7Hg14PKp9trnBXlL24y2lK4gCZ/xttu1DvC3hRKN5Mzu6ogv5C2VVDef\n0NE04fQB5tlfcPrPeRLKEf2scWiEv2wVmBT5CXf+kFUWr74MjT6Hv3j6Q9pE\nu1TcbX3+AI2Xq8d9fYlar0EGiXpcUnu+JHoA7d013KIl6dTtk/S56NqK6BYk\nK0n69T2+uDVKYOoO2Xld8NECfxvUyu8Z0oSzdOFec2X7KokaFQqTwwyqKt+p\nzJwaHt8Rpknwc1Eboz0tmQoBYmtJJJftqJg4f07ATcB9ImmnEC0Q8tBjVmem\nBeYm9JY8XqtjvHT3bpp81QFvZ9ThPw0LCldPqmLhBifeMGRJpugZozaEyB6b\n8xRLw89zEUG3L5sC0nk8cT64t3OAVHZbBCbQDkW1gTrHuedTwke0e9PdmdHC\nkKLdWsLxXPbtleLMg4+wGaOnnkdSuL+duz6WiAqw1JHJiqXxFwPu/lxmo4AT\n3zbN2OOdDY9QIPb9++Vo+NG0nDlGvCbdFba9nr2HE4wcsf50bETSMs3qAuBn\nnthK\r\n=1M5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5yU/KPke27eTSLe8zCARrUJ7W4ebFNOT1mKiykQOo7QIhAJU8ZkccxKvOgZsTg1o3ruqwnIltYVCbOk72ItmIsT2q"}]},"_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-elevation-overlay_0.20.0-canary.184861ee.0_1604709425192_0.708479550783703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.6c6ae2d6.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jQA/SaLAOD3u33Pveowk9pTk5iefQkW5Akg1z3EDHq8MG9JpCc7pU2zyFpiDwxC+psvAl4nxiZMkuV/V1oDp7g==","shasum":"ef4bcc7a39a875fdb6e7d1ca40ce2e44ca605adf","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6BCRA9TVsSAnZWagAA3lgP/AzIdUZ5VZVoN2jgkZcZ\nkYWXGY2M1VP6EUcRMu0WZ3QT7Yl8H9xeNU19nixZHXIUFJkjb9hPdUDNV5Vv\nbxf/WgSSWZADpCxvjBPLvQN7v6vzdMQK3jAwtDMtRxMJIMZEQiNMhtlQltGj\nB2md40lLf2ns/6P/z197p1CgqOhoLOxaJ/Oi/VZlb5veuV+E0tfYoeb/+SD8\nEa7W5h/ApkrmBMogd26TPTIU2xBEbkPml/3V99AZA6x1GT3THf7pum+0kd8t\niVBzV8nxXPdqSyrpdqIG6B/CdHPW9IyETpoY8hjbNs3coaoRu55UEL3FJsMJ\n9p7w/rjdEHIWRa2JgsEuLUc+J9Y0Mba050TPERysE+2dLOVsTont/tXzB1lN\nXcQoLsHmRy8lcDy+y6EheGfkyKzoiImLTL+nidD7ucrPE0d5vIRXUW4CPwT4\nXM/PFHbVUozkVjwHZ2BFjFcROPf1hPwaR0xjbMn56Qpxagu8gT+VqfU4RtX2\nLFcKRyQDnN4yir/CHUiXnsdcY77NWi2wCb22QSWSaeNQJtV0YZpPGtmSi35Q\nvF4E/W4WVOz9p3jteSCvNjT9bDaD1z4sPXbau6w5aiOLZKcSFSQqAqTQL73T\nDdbAGYDxQCvUEGujgfg/1EsYsT/IXBxTc3Xk+yjTVMUiHsO8y/fqXtvCvd78\nWzFd\r\n=3EwJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPDJjME4/MrG+IEoSmVuOpX8KLPfUsp4Fjhpg0n0qPYwIgGsBaOzKFmUgy10cBKYQ1SJvx2wgN+ctKqumSS6L7mf4="}]},"_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-elevation-overlay_0.20.0-canary.6c6ae2d6.0_1604927104794_0.9314006801933206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.ea2aa477.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ski0qCnqXuWe0TcAwsD/x8nnUs0XCdl92kP+x3nPv1VOcv0FFmj2PQccpIQjH75qaMt+qHZZyBNO2HAtc1o3Ow==","shasum":"aae51ffe7a17869654f6abae218d9a73da5ea363","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.ea2aa477.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqddOCRA9TVsSAnZWagAAzbEP/03hS4wwBiRb00KIHO5B\nof8wNeD6Ovjz3O1LnFdpDJfCkPOTaJMqXlUb/zI3rtzYuxaKGNAjRCso5UBf\n0GLkcrkn4ef4mdBf8lCdqll/vcI/1b17ycwCngpO4HTKO+CYjt9tm9W5cG1L\n/sb7pwKk/dLrw6DW/XMq6RIj61d3w3Hk/S4iuEpYmXcUADCYqTNaGkc7Deop\n+upUbYrtOFC0A2I8yKVtF/P6Cay/9JGS5/GT994biiPFVpfU62ojOJyg//s0\nnFi6CSJ9zkVl9d9u2ckEquWJd8WCvPlXd9+v6LjUhZKgBNs9bNn/WZeVdoRb\nHXjfyez7ASlCY8is6GdSKb0vUKMCzJe915zcxvrVhEta+zF4wjfSH6F7dvCA\nd9TKudG6Q22qQwCFHRbFHbdlyPoynq56RJ7+2IIK9TDAq8Jh7V/ZN5TWaaty\n6eBuuMaKpeyFlxU5ufH3eOfqgU6CDtnpDYB1Bs4itP6F+Mmqb+kkskuFBnDu\nd4LHUA2skw3D/x9V1fRDmlig30JQzgfHNzZNFt4eIcyPLaGe6ObofHHfnGFz\nM0EHSxC9iN3TsMeAlHJbrdnGern9iEC5siLwekec8wRy3DCMXEQRn0c7CLXj\nONZsI9Ziy2tx7pgxjEmDMm2hWZ8LNnnOO9SFNnouRpG6WW6CFCUo6k1DuISA\nmYkv\r\n=F8Gd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMojaEw1xCkJOwAucu8Q0/jVs/40ueyGh3J2meKkYCewIhAM9FwtSnxB5wST5t7U5PO9jwaWT3elW3wGOcIne2VJmw"}]},"_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-elevation-overlay_0.20.0-canary.ea2aa477.0_1604966222216_0.8047015075918538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.a2c088dc.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-94G8XJCxR/8a0TK/dBRWa5BCavi2qRG92KbQpH+3TeV24R2GQZwceE0M2qiKiSK8VtihE9sa7qD4mJ80n8cxxA==","shasum":"72f858d387424fbe3aacb7d08d07a351aad73e5e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.a2c088dc.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqJNCRA9TVsSAnZWagAA0REQAKGZSubzUEzTEf8qkVfW\nKQrqcVxKzSc2aOoNMvHi4ZGCi4ZGTcFJnbGHUQTuKo2p06eh5MBgIucMXaTj\n4tnEw5F1z0la/VZGSHQY+WmI6Md6hMOhO1SKuIvvQgzZyGkrdpV8MRuQhPnR\nR5Hdq8niEJXqxQSVw2xN6g6Le1lFubGKSm96FFs74NjiL2N5qaT3yK9yoKtc\ngiGyLaqfuq5AFjRMiqgvaYc8U4QTD5l6vuhdD3vUhYhETbAx3kuSuuSbglyo\nFxmmL153KS1f7XECTrL0ftvLG1w5APjDi7ASNnCJhm2NqkS+QTbwEflGUG9r\neTns8ZL9mZIV6LZ1ItIVkWMD+dSw836+VboAyAkpgOnX8HgjlLnVX+FczGdD\nmHLLHeAHcfXY+oOcpjAe7Ju75hQhvQZ9uOCUPAzxEeuniksSrROfTFRI/qKp\ngVrZiYCCkYmIEXfGNLhu2MQwQVColBhKFwTT9ZzRBT0Zpwr5Ox3kaJrGzn3U\nV4MY+P0A0LHZLianPGJYY8DY5nlMdccahQ7SLt5JjH8xDdSsVvqPIPInkCHQ\nf4vm2y55tMT+se7OYIqpF+af9nUhf3HzlrjEURapoZWiHQORHkHRYsDT1zjB\nsKhu7QqPGhQhVHkQI+xRvM87k60J7dd0MK566HJB1Jl8tLT36vajEpfLHIu6\nQUjp\r\n=Fs7A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjRHowva38FE4MsLmPHvW8PUJrJwqajfikqwcM52ZO7AiEA7oFcLx+7DTZGKcTmRpkDWej59gHKVwbzdGcFkF+VD6k="}]},"_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-elevation-overlay_0.20.0-canary.a2c088dc.0_1605018188779_0.1480999093602109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.b04d71d4.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-j888G1uDQMiqlPWnloyDdfB7O9M6y3R5NfrZByJGhrexdhrK6w43yCIwZJrmUzCKTHcb3Nb+cCHk1nlGj1M3vg==","shasum":"a62244828a568bd3f68996dddf9ba27e13bfb655","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.b04d71d4.0.tgz","fileCount":16,"unpackedSize":495228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRFQCRA9TVsSAnZWagAAygkP/RQEsfVGEOYzrIMv7o8n\neSzwNvBzprs1rLCn3TO5Y1OygPbWMS+7HHYYwB6nfNwrD8EtlNJnqkNYe6/U\nJdlQQsC/ncGyThkN5OAYuKSkzK3LW2oxpjzdrv9B2ap7g7i5RINhsFrhxG3n\nH6EU9tXhqqpCXEK5Ve4k2Dv+9SWEcD+F/TBvdNWFAL8vhWAPFttFpHf9dsNc\nv0pWqGDZMK5K1yH3i6nMtKlRzOyWJttgqRJfwbxtVrb0hMwYKDXu+Qw05rpm\noku1n62EB1wCLj8yrLSCO77rAoloGSpZhhPEM2HPwmHx3OvgdQjdQs83dblH\nygxpg2BNYUYPI8jHiBnY1qfXLuUHA8Z8VOUaxa1A09X2hXG6xuWFHGK47YyP\nmkEkE5Z91xDnTUvI692yydnuVAxPd3GGb0Uf9qlgov4aWOubWUcRX8susXt2\nUh1lHwW+6weAVJJ0iZhgBMCNXLOxrIjRQrqIT660Llf7RCTz0NLqY/IW91S1\nNBEIekzYALEM+z7Q6axRWqXsn9wNYmmLEwbM4S/um2UnBQHGg3OWPj3PgFky\n9Noi0nRIKx2XBqA2uKX8U38EX3/vBvg2IS0sKwZFuTv0gi3S1a3UKnf3SRIG\nOFbZvt/neM6EJC69vvH9jrGuVW6fEtCsLF+YUo1/RuI/2IRpjeuubbQNMCuY\n+DJy\r\n=R3BI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBK4fntSWjk45zby7yvPMNp4urKX3Y1mEn2BEAtHtf4eAiB7jXSUnE9RNm+GvwtWtf/SYSbJLI/7Qi1PXBq1jQ/2vg=="}]},"_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-elevation-overlay_0.20.0-canary.b04d71d4.0_1605177680085_0.7955119621470692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.2c553352.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4VIee1G8NIPSOMaz9TjfwYKZOxxwBRr8xv9yhNgpZUu/I2pTFG5uyQztEbnxrJ7nwTBze68XseVOjtAeHw0MSw==","shasum":"9c3659173b63fd63024a9aff066938615b53689e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.2c553352.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbo6CRA9TVsSAnZWagAAqfAP/R4gGVrQpiZ6/ZkEYoV9\nh0WIArfd0Bs+DIVICzWM+bwjIWKhs4WuZ/NE85lei3uKX8QTHMFZFfxRDbBe\nMu45bOMKzCzomiZFIuX0cnENE731ygEMSvflN65LivFl4Np8lxjyKtEsw6JA\nZxp3Ww/d5uiL6lvo+LV/I5DxyDzwu6LAhhHS2DDxKzuSJEP/QJTQfeM7VE6N\nwDxbJ+SfOXFjc/WVZ5lBYF+RyGlTXtXlfdLa7o9wjSmhXCVJdnn3gs4UWjR3\nFO+GG7q3QGKIh40MSg0FE73yF78OH0CLWWL8vXWRBIfuQ6Iza5bqgYbeTYIh\nXRV5LNPv8GJlwCa2OVleF2TyR0+xO4CqJ/Tnhqn/5+zbC/w0d4lQ3An7pOcX\niupo8US/d6de8DIhjyCpUOXsDKQQyy0usDtQa3mTWoqLt3gOjoKLWQHwpc0k\n0auN10Qk5WyD9BZ7jOdEIMtsqzCJ4iXO4T6QK7tirCf4IImzuiKLUQUbOTqE\nLEhExtLo4CIse91jq4Y/NC1iLs/KI/FTsCAP39MJL8AIfma0mgtcsdV2LLZ/\n7oJfYmPjOP7baPuzxnJCQU+JEdPxG2eGo3+1besj3GFL8Z6JpxfR7c4ompcb\n91lPoCSDm0qfSgvPMz+aCdwaOj6bCkdNI8f4Ltezp9dB/dGzpCVUYi2VPxV/\nbpjK\r\n=mfnP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaiAxGL+FMd5T9yNeEQrM5YvohnN3nTo1nRcgtI/SzlAiEA62jmimf2ePG7XYPKsBwOZLDVgQg0vCcJ0Okar8GLAXI="}]},"_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-elevation-overlay_0.20.0-canary.2c553352.0_1605220921577_0.8216897611208387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.6560d19a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NmsEeThAe7lIf4q7FZqdW4BrdqE9roQOOIODrgRgcPJSNx7iPpDwSfIEi/Dvdst+474Nxq9JR7TAHpVq7OBpzg==","shasum":"54b3c6d4c235f9f39605711351b95c9f6ebe5170","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.6560d19a.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvDxCRA9TVsSAnZWagAAtmQP/0nDJxmG7pK+TZ97l5w6\nh/DEb0mOQnTvJCgP6rviqG3TeFhcP1D65c5PPry0KXU04Z9LQxndTA846UJ6\nFGUtC+NN2487tvP1dWFN5FFJRzxh2sFNWGz057Kr3XGM7ve6eEBGW4inCNtK\naL2oK5ssJvyoWcfYOJWOEvymHOpm3Jess4anLiVk+pLLOYXdM3t2xVx0VTUp\nk49CVFyTeI9AqPpgzZWNwEED2QxLstq/GCaoq4akEw7UxwbcAEMlopzRee4b\nH9NSr2r+jQZ741ijoNZZ5CqrN+FXH9px2QrHADaxrxS9dJ9ENeVZ72XRDVvK\nbl2f68ph07MZY2RSiuwgI2ZWRTeGVxMoLX+xSN4QTsbE/AsDAZo+e759xoQo\nanH9Chs+8YMzHYP78W4GJ7L8mnIAPqV6A+IpvPwJsx4Xe3ZiizVkmgsoPyOL\nKDzx2EwyDpmNAa+ABbg+AQUcMmj4HzwqkQwF/o63babmohFK2+uPp9YE1EZx\nUSK313NT0kHMdwhkL079+ZMXdSnE7xalYmW0r7xAFR5Rn+R22oVj940jIwKV\n2jdnEIFhiN/Sp79f6DuYuKaPLeUgT600Ax4NsSL7uyraeAsjg733ogVlIvjh\nshMNILca9WrZSBhnT/XoBOuvzfKuAjzpq7iQUedwsEmEg8Fx4qc6bqLxm/Dv\n58Mg\r\n=Mo+i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEoh8SqC27zKkZoS5f0OO5/bTebLWz/JTu6NmlwR76IAiBBn6RkiiodPWJy3x6EoY1nI2L9yKgqcwFguDs1yrgOQA=="}]},"_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-elevation-overlay_0.20.0-canary.6560d19a.0_1605300464671_0.3693966774020139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.a28d5ec3.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TbmaLMqh5D7wFTGmiRMDXW9OJ7CGiLge9g2FQK2VQ93gbEWYkvp0yvCGKEGBmxJIXWj1ZCs2Tr3lxReefTQYVQ==","shasum":"2b50c6c597ab02340eca0f19f90bbd2c9544e7b1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.a28d5ec3.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+rhCRA9TVsSAnZWagAAuj0P/1gGqPYIMUgr2Q43p+lQ\n6mYEOg1e2njewRoSAem//vS3lYvCPcQ0Ng8FaTc5Prbv7Ur57/OBC5y2MO+S\ndnHDLgcMUE73xnPlD4qY5A9Yf+Qff0Wnd07MudrWjeWvWRGdtWZe4DL+COZK\nAnD3UhG1Ob6l17+bIitdAvqBT+fVO22meSMfQXpZdYj7Dqj6VvQuEpaJICIw\n3hEyQlLhNBAo7ryAMlgFIgV5MbgzydqWDi+XuNncEwWwpJJPJHHej9+hjrf4\nrflBGfYDSKrDJDNE18K38B8FiDeDGwPR4F1qq19czUG4R7FGg4m5z4kQdmxJ\nkavRxZziFImv6CumQGZ4NUoPjt0O0hSzXmqtYLqRicgm+WMMeb+E8nRS0icx\nr0Dpd9Wg6Ks94K1/OMseLpN2lIw6L1BqmCeAy9VhCHDvf21gisyaN+grzMk1\nca1dX6l+0L8xBYlDmo5mcTFXB/pLRDtASIbf+DEK1K4C0SFZckQQM3Er+dP5\nfH/k5OGETr5xv4b+3z7NrXp1PuwmWxPSk9fi4UtAZhM4072VRvpwp/73xUk3\n8WpJoVHhbXfiTN2SvmDI0pvIM7reepfeCgeecR6ZWSBXVxyYS12O35XoIpHD\nC+sT8JGbFpL0cCtj5HMwfeBGrcPPY3U0xPVA3rb81ceuPVxHLfMY6vEbxWbp\nJtKQ\r\n=kl8i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICz3TAfKRIuRVD3tuekPF3f2yCuyTXszrtKSF/d1AHuuAiBRsns667KJQhTpAnO7+ZFIGwuWHOVWXfPZ5LDm1lH+rw=="}]},"_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-elevation-overlay_0.20.0-canary.a28d5ec3.0_1605626592631_0.9682601817385952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.03e7e778.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LOyZBOG1xOV57uzYnqcU2v+Uc5wyXaV3A89Rq9QgD9XrnJ8KvIi4yRjPCsOUQ2GqIhSGfnQcKsSQPnnvslq6gw==","shasum":"f74b4e5f3c0110cd89121db2ab062574e95bf1e3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.03e7e778.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCN8CRA9TVsSAnZWagAAt48QAIn+/9t6wwnVOS9xB+HY\nb8qnDJXcLsRPHLrvMEe7WXoCoR5kcEkDexjnpVcgr4ymISqrtqjLuuNuI4o5\nn23KLVC5tb9h5GdAIvniqK3FgprCiIALc4UXUQtWV/KYRNviTiHMIMWNIdU7\ndTc95hfgYkqD368zuFOgdNnaGI/1ZEv53PiaegQD4dfDOBgq5kzBEGJOFX/B\nfMdq8JXLicM/2RVitLu4ApMAcq5Eg3Iz/JpLCDWsut0FWOGu1uFT1PIfKnNw\noFxQ4A0xH4UXx25mJStvEOZZuE0lxY0wIghb6xVpH0cVfr1M0nY4ZOK6XsAj\nQZY86yLhwosfRFESA3LOGIISYVI1BT8WNEwmdct+umVR/FtTPmGs9BJU816M\n82jcJSd0zyuJaCH7MPzdSNxsRO/+H5ZasOAgAle3ZQN0hpxKURel9fZ+PpVk\n/OMa0FwqbYbdLyIsraYsP9ZNO0oVE4uqjiWAWDYZ/PbFIZotuvMVBhMex2JU\nJzOoE0J80DUWneIdYqELQni0PnYAfLiXrE/tWXMWZhlnNZc9CwP6G0Jizkcg\nGtVqjIM9Fl1+j3TECKr+aTzNt+gzlxsrzQGvS2Tczr+z7NI4t43BzhkQew7V\nJAtxMSov9CqDfMOtdUwYScwI7AiEMD4sRXdIRfZydTsKR1yL2r2y8sxrRd5R\nudqM\r\n=96me\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAu8ivjZ/m2lyk4CN6P3Jci//6a2amET24JlKfK4QuGAiAnq/80yD4kxWx/jdQcsS1kT9D+Aio1QwT+BVmssjQxyQ=="}]},"_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-elevation-overlay_0.20.0-canary.03e7e778.0_1605641083923_0.924431714825446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.ac8ed597.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Q7vmhG/slfb7KDEzkohhsvo++guuQTrqxFoDfLfg9U1g/xNYpFyFdkJCBU+UXNU0lD4lQkQ4oobpotU1591jiw==","shasum":"617db57dae1ae0565efeddd60145524f1a0e547a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.ac8ed597.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEpwCRA9TVsSAnZWagAA/lIQAIhDG/MI/CfnPl8VfKca\n1mJAvZyNobwBEFIeJswobHzZ1eaBIt5JM3bBRhlsXekBFH+gwvPw2IR8aAlb\nJzcQtEc3Mw61ghgUetppIoj2w1Z9Nj5QEML1Q5fWtMK0cQSihny7fAlKVV9/\nfBXWfviXaV9VwiW4Po1judaHAySoiQr2k8FoMPBNLzfQMmuRIDIsrWxrzEoS\nELcQJ6ygKKhS7EWpVMTb9jyuGAAm43GDpaKCdySeorYekf3e8A7GgUfvNap+\nDMRCnLm9Mvk4yKwn67WmR3NpqSNBTNMbrMtpHgMAXYs3/y2FqtGMYrVLe6mX\nzGC+hQgunvnkdXKFvB9o44ZJCVCtA1hkmq5DfHL87kcSlTEhblr+Ehy+5kqd\nSCjH+q9a1XrcP8GqH3+OLVT8eSR7liiWxUwROz/SE9HQHKaKJhuGRYyYo7FN\n9hs/PaLv1S5wo6n9jNieHty9yen7V/g7WEGdL5mC5FZMQSE64OW52387OT29\nUNI5ZRrbrYduKSH+Cy7EvVVxgLgWCcka7FEmOy9GTvk9o3EZu0217vpUDi2H\nfBF3VGcPDHd7Jy6hwJTkrrfa+WEd/ZiLNg8guq+Rt1ENfg7YByxXH2lRJPbR\nwZZ+BCD2HCzyBQWrCR5CKYReETME1OOzj41TLGxId7T4h7J+YYpLPqLMBu7c\nPccf\r\n=TjRj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKgANXXVFkejD5dlca89RTe8Pe9S6YxHvxEUUQv0ngOAiEA5neWRDCre7ljcqlkRcO6k0esbleeBL73N93nIzOOzYk="}]},"_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-elevation-overlay_0.20.0-canary.ac8ed597.0_1605651056475_0.7203964295724969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.b6a60f60.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IEbfAEpigiN5gNlWYPWgl2+OJdUkwbYZ6Cfkp+R7D+MZ0fl3S7Gv5HM/Ei5cZDmpS4u/6eol4yMYbsDcPQLUQg==","shasum":"b3bd41a53c4b593d2443b97743c2a017bb986155","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.b6a60f60.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFPrCRA9TVsSAnZWagAAJEMP/1gS1+mf9D12YgMw0sy1\nqPxHFRWL+DDpBx6L1d6Kxf0ICWdj4yaFTmPux/w9spI0Bvd0KcjlzQJg9JHs\naIUKibZs6Qz7z4azAiMm3M6F5cJ4PDfY0lGNAQbL/Qbsdwqr8fVWnXU3357D\nAmV+/4Ok5D8mgl/+qoRr6Mb5RGIL/q27JmsDlz6lV5bIkSgTPlKESYlWSdSi\nPgMVvCmHM6sBwxnVnD7mZ1uZ46lDtVmvGqswVMfTuHaRpmkz0dtWr5FxfQYl\n8XVAgV15PfZemL1hQ2r4e3u+VEpkq08L8O/K7L/kH5Kb9IXCd80O17MV5ki+\nrneeUnBYhrz0juZHkUJrJH2Yq3mlsC/kvqMTnZ03Fj8bJf45+G26reCTURfK\njlz7wq4F0NxEKiPk4QknOQtnRiuKZ7yVfvNmpi48jsOJAj9yuVvMPZmUCDsv\nX7XeZrJ0XXC/CvOXGPVDWCzj6QHrPNSBnxWKSkzax3OqKyl9BX29SunyHt00\nU1UiTFBGdnn8Ud0Q6OMVuVVtwhIoNgu9LYxM03DwpGXJ4PZonAkonMKsBWB3\nG10SIQRZgAtqeVQPsCuE7Tk5mhNO2hOgByBzXUDIY/cZD9HZA5tB20G1fLxf\niaqIgg2KQMMVLx0nBwXyMcMh57x+UTtn6lrXktUkc9z9VHXcfb+9LYWo75yz\nQ2mS\r\n=Nwhj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIECEmJI8DZe98+uvmK4Vv85np8yqkZpC177pWtzoRvVuAiBbpa6ZXUC7xZZabaWH3no0wijqHFUW7zSsgpiHpPiBYg=="}]},"_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-elevation-overlay_0.20.0-canary.b6a60f60.0_1605653482758_0.588884372242596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.71cc24fb.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8kl2rjkr4BeMf5cWMT7tf00D6dAd4pPuh4gaSkHrhw5o5K+2n66W/UMOl6VZfQfPl5eOmqWnWWcGmguPxa9WuQ==","shasum":"55a39186679eae8b26ef9eecb07c5d759562f978","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.71cc24fb.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFmoCRA9TVsSAnZWagAAJuUP/if8lqOEivTOl1xG2gld\nOJ3SyBNtLspgrNqWIjeubNj+RXghir5fhI6JgC1UhY0nd0ArbNFOBIVYAJOx\nnLoBFV7kRRy4MmGjSOZ4BvErwFUB6uoGMklOZUodPcAcImwUh36vxg7+RNv8\nspfAqvmSvxT2bGvrHgye1rchB2oec31me2qOy1UPNVwbigJRk+tqNEGhxSZy\nPwRmQfjLSOhaZMbqTcav+XIkBuGGDLU5DkGhOFR/huYFubXgCNd3e9/nglFD\nBmaN//yJ1NgIU1atWKJQcpWl2tDL4URyMwXopG14A/yEW/m/LrlMkBSI7S7y\n0tkdJzzGGhnXHpbAaMILn2q6o7I2tWQpa+BWCrD1U+PBliyfS1t883bp6miZ\niheZC7Ra8ajvdRrPmyi2x9p6QNyev5h/mpbJh274ZFQcGmpPKx/sXhzjtgON\nE7TocesTK/h6r9rzi12rZZgOlWVM4Hx04sOKM0okTXo3KKYZR/WL8QuFxpwy\naX/cvE4BFXeLVXu+WlqkwynHcrSqEuxo+QtzxWOdQPAOb5QeT7elQs5hngU3\nunGP5OL8Btq6GQNQieNoFCLtf03UIIqjq98qOqzBoorx4KIt0IZeEMv+Sok0\nJk5qjiio+rVc4dchaAHhBHM1V9tfUG8BqZ9AJ02hdfTvNtC5Zbh+YVC5jqLW\nxl3/\r\n=UpWI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0+5qdcmmUJ+D43Ds9K1mWHmJDisKUvGnLGgH7jk9LsAiEAxgdwtfJyz4l18vlyf8LP8Nfg4UaBrlOzNXPI8sjIN+4="}]},"_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-elevation-overlay_0.20.0-canary.71cc24fb.0_1605654952217_0.04989909159960115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.761027ff.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jIFJRFBnC/Ll4TD2aXnHYkCcobTLe4JCq4FQW+OodVTnP6pmM7UxEusUCnMQQu3R9eDYRUEPrvn+9ObgL0BoMA==","shasum":"5598286f7816db3d5d04150e4ccd3d4b0fb6298f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.761027ff.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZxwCRA9TVsSAnZWagAA3g4P/2M4EBlrMGyMawukzcFc\nBtAYHjgk9w195rQj62oG+LolTVZLGoVctNizKDbVod3t6slFkP13H19dyBI5\nNrLDhfrDo67A7n6mDrz9oIyFfaYiT58QtSxuPtXf1FPrCoYImVFELHA37nTz\nh1uAoKB28RyDVy8Lnh6bYa4yI3Z/fKabGnriwdwFYs99PNkeJZ1KxuyoMdU2\nl0CIeEGMhT+VTjs2v7wxYKO6mjK4Wkx6xiwjGZE2NidPNlug/XZCdqB/flBV\ndMdEJaiHeid2mZveZQ6NNU8tsEqQFJBphwIsCqU5iF8ChPkq6PKQuQsd4y+4\nxJaa2CqrxPI85k/EaH8Hq0HU5+37QCWSLrpECX5tRtsKfvHmD/V85wtwDj+p\nVFxTxMGh5/RWpOX4RbpIg44Cj9qBIZ4h/H1c6/XoNblIWYi/qzOEspVXApuy\nhqLpSgGlEvKskXdXbwUMDYkZTyEqToTQKnuCBZY52NoHyJAoiCfWj8IqbtRJ\nMYfbWyj3AQ/opNJHBrkBFj77EUUaCugXOgpjRz1Q0vxtB8LG4yuVtEn7rgLJ\nLGV2hXtDStKd6Kl7Nho/USCv5U2lYd1HNykgyZCH7bGUIER9IgSHFT8O4skL\nUSDey/lFbgH7PNVUnb2xbt5SUqNaN3IxKqjpXq132WJ+TF0QlzsPMHHKXLWO\nGFW4\r\n=EQsR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWCTHPj1sbG266/NAKst0Eq7YQqClSHXnxpaCCtGqs1AiEAqVwaWoKYFBGdVhsxtNQ8dNITgJfUdwdZXygEgluCk3g="}]},"_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-elevation-overlay_0.20.0-canary.761027ff.0_1605737583785_0.725360975254058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.dc93d04c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GKKjNcE9AVsVxYdNRLLWjd1KUCQhANdEUQCdgQllL0g5D50HacU2x0Brnx3gtpkb7I+uYU3CT55kaORdgGH+ew==","shasum":"a57ee0ab51316cd3009260312db36540bd093d06","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.dc93d04c.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ3cCRA9TVsSAnZWagAAVW4P/0i16sNPPaQEssN8xztW\neGPgI0SRJYE5zlyE+SNa2o6Q0xMtatx+E5lV0DcACeb4n4f8RWBUKp9neQy/\nZ4b5g9KGUAbr64hvzA1mfOkyC9Lvb3dvi5uCuVNUyrT6rvUTA2UE+gSPlo0w\nMtQPqXwKF7i96g7byq8LEtlsJX994YwSJY3zrZ2kqc/vKrvTBBKsYeZZl1xI\nAHug7bHCNBDJ2KsS+ID2kDTmK0arvf35lXCdYTqQR+uBJh3uKTjcbW8Uba4D\naNRXIaZpP8mA72U86dLYoZFOfewd0ABpSOqt/d3la87273PbDw4pwKJNrGy7\nMASCleaAXfFBjGmSF1V5upOI+iG1ogvOIdTdg7oWrLxGTqugzm5+KV0TdTen\nMl52LpKvh/uZv9dThIKjYyVuqtSZ6L8K5hHLAKiK8m6542W0Gdrqfu2iywOt\nYAIfzxAARN7UPcqnPObSbiqHv9sUyPk9JOkbssqoOOyFJiUDoal0sTodIjNm\nzR7USmHJDDaRKYMtL/NU80bLyL0+slF9jEJaSZqBh3PF7EcoAAZQszhOWJT0\nqpoFnwcTDjxY12zbESbfbSFZ5jOW4L9bU/AWraOsoQSz3Cf9dBfTvXYy3+d/\n+ld8QnYcW6g97lWVRy2dmSZM2WoNNpi9z1Wx9FVymsDkHGKXyQ+dwHoTStWp\nP5U6\r\n=Nis2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjlmIOfslJn+Gq7w8zTOSiUQ0fQYdm3BBCaqcSRUlXBQIhAObKJg3aSm95EWli9aB8nawhSxGWYnAJ2FrP8aDOv0e2"}]},"_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-elevation-overlay_0.20.0-canary.dc93d04c.0_1605737947952_0.9928189795550884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.4a5d4eeb.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KWMyiJUiNbHai+Ehljy+6SZI/W5ZFBLbNcgXP9Bn7GGuZjzgL4w9eura5dFqA5yLEVyEpZUAW50S60szQ0uaGg==","shasum":"c557afdcc6e49028c92322af6f15c14a958f658f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftlcrCRA9TVsSAnZWagAA1PMP/jup/QRQhXTfHEA6Awjl\nT6uhnt1i3CbmvGwYm9QD13yT0lQvvudBQrnDHdvkXWFx07IFCox9GIti3b3B\nWBDpspPKSBbw9HrRcDqUhe4/M6PF14bB/LiYIC+lElOFMIoGC3WrGQXIQkab\nxtZztwyCPUcEuElbw4OvrcN1sP4Cv0vB0jnRFURAdWQ5FStN09V1PySu2G+P\nFWjdSyqvQrlLDG1sAt9fcbKuOhWUXBO2dHYVGee6EBFK8y599/1NAkGxVZGX\nXJ85f6UVBIx8eGKbqo7cJ/wYj4g3yH/gt63cdOx3UwQSA3MUEj3i66PbrefH\nUmrgfz7OsmyTZCDhPplAYF8mnvDc9TuXvDN36Q7YCoLbdCYkzOzOlUVGjXzJ\nL+wvaKQ9iSXsFVOIoWiiSBNGhZOIWos3IIaqEDxzmkTk/4dfRfSPcdFTcVMj\nwcwSunUkLWiUl1jHbQCAxxQAC4QWom59UT9R+9dUWdmBtZj189EULsvpQ0a/\ngmWOtk+TfU+W89Txf5qP7eunZuTsTjtyW3GZu51ikjGkKFD61ajO9+Ms1loU\nHJYBkzZsJP7G1T2lICEX9GNt8vKCV0ND7Rn8bqrjb9D11whkOkjgIpQzylMD\nUDfSKJ1gd7H4uzpNvAdPRlchCOosQ+H4T79vg0xz8Mpr8oqE0fj8YK+N0vWy\neolL\r\n=FtY/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEi3qMP2imbZ1DDuNhD8YcmSNNQe9CXqN3kiUpGMaj78AiAncEDiDizy4+zM7sUNggIOc6AEJk4VM9uTxKYRlK17bw=="}]},"_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-elevation-overlay_0.20.0-canary.4a5d4eeb.0_1605785386647_0.4276818935461546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.bd176a15.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30c11bfc2.0","@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MSGDxdYB2BP8NcUYqcwADKB7HC1l5z6J6IGu9VFr74LXL2H2A748VdYM0LJ+zZrJ1hK4Gtcz2ghFHG6tLZTa2Q==","shasum":"cfa1581fd61b98f221047e9396b737677792d494","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.bd176a15.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsLeCRA9TVsSAnZWagAAShkQAIgeKMXci3FUeDEj19CI\nJay9ONdIb1s2uCrZ5uAdspq0IaDG/KSQydS+xO8l73bHP52NvZ4MxD6KSBPA\nI2jHMCcVwn1YjeLDhELjSiONYOFhhc58LJs9ttpaI8r8+3V45mRoUpOc+dih\nkicvuXvz+bnwNk3nLLIKKUNOCC3GeCEW1DkkR+NiNozoDP4Fkl24duXC7rwP\nxpOcZ0l2cGr3PZv4gOZpkV4021+nF1nWqB9lV83LyBVwyBVRJa7sR1blLXz5\np/43cToPbLkvD9eJGCL2FajCdR+sNlVRaao4rDMZUd+h32gQBxkeEjZqcpwP\nR1hr7AfWtRvscP03WO05tHaR+dVJNRhaC0wCjVL6pb/JlmdaZwxACS2kR/FU\nkmk7FYtQJxnUfJLzgf7KyU3kgkQPCD41ay6x+Jph7h1iglPYzMs+PIQqvFRA\nkEbvy3qVDwhGZVmqAh/q55XOK+HgYnBTqMLRb29k+4pqRatoBpfhMvZiB9wg\noTG7IfRZOpn6+LKIOcr+2MDeVrfokTte+b5QJZ4II1+mJnRAwn7CaKtFnsR2\nhxSD3we6IGIzxNeOovLtBYX7zOhh7GZffOKrlMM6Lw7wmjwMzMNxkk6WQd89\nIopNWlQxtHMuYxGdkpijaTsRbwwgHK3yZPGYfRQeMzyTaE8H1rGlpfwmdGsj\nPJ6h\r\n=Mfks\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2b+zzYjtjbCPJgILVEKgao69l+rVWTwH8y79vRh7IcAiBLhk23TtKgX/kq3UGJUYmZY92t1mOep/odYHjspnoI3w=="}]},"_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-elevation-overlay_0.20.0-canary.bd176a15.0_1605812958205_0.7898850507622264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.e85aa60d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xVi0NmT4ewdkdLezLSr9oVLXL7kfNzKcTPX6+bQT32vLpYoAdNXd+wOcSEjfYkZ0pN1m0F+reifn7d7P0UaF/w==","shasum":"2a7f4c97cd5d05e4933101191de7c2db72532ed0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.e85aa60d.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDZ4CRA9TVsSAnZWagAArHIP/2TdlI8BoLsl966G0lp9\n0SSm1gebUa9HVLajEeFDjn39sw/Szd+9LQ45fJ7gtcChQJtvltNfIMaSkzkP\njeitJ6qttrh3sbd9YuMpS1QYpULumjL0y9l+Z5CZYyzJim6FjPUE9ORS591v\nUvZr8+0QsXbH6WqKvNC9hGGlsEMMNfnlFC6G+IDgNyIYysB1gcQGCM5KFtzg\nxwipKoVlvSvwCmTsde1FjrOr0bmhC4o8wqsN9Xe3GlfwHMXPrUwhnmNB7UJS\n4PIjrLr/Kf6Ua4DuO6q5RJSDol7R59fIHHy5Gbdf/50uNvTTwwymvQtgldds\nDQ89ffmTnNAX+i6EYaz/nMFI04dbM6oAoxm89BFifH0kZ0WDnWkMbZh1iC+v\nEVDD3J2+wifn24V7mLOaHyLklSRYSOMqwSRRq4+QTlNq7jJM+7MhjpIRzsjL\nHfzQwe9O99spDvqy7kgggnJhxc8fOOjNF++gqWYB1+2pwbGGUZk2PrWP92zL\nQEmXBfe7Bcvuvu25MiBM7DUWsreMDgp8QpMeleSUIMK2NR8lIAPmJ1AkHP6y\nwnMRG7yR4tiaYTiniFSB9zRmCeT+8vjTTpZEQvh0Z6Aun0qbcEvc35e8uicB\n3ZH6VlmRbJH+kEq14o07qyT9uOaINp958BgfU12sDqu0bTiY3g6Zkceawx6i\n87jr\r\n=zYag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICu2v4PUmiriXNqDBQymYa7EUr4VBxsrJsg9mDsXP6xCAiBaB7tdBuK2BkYLWzY3wuCjsU97nwE8ko5c7tlVesDjqw=="}]},"_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-elevation-overlay_0.20.0-canary.e85aa60d.0_1606170232001_0.18501425971237118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.72092360.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-OtvyuWvEN1OzNTqtM8bQLhI03OSFWLq8fA+lXj8+wYFuI9AJDB5u2O2D8qig8uc7iOCNNyu1XZi+lSrA7XtnZg==","shasum":"501b3648a3fd293bef5614fc57fdb0602d65ab7a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.72092360.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIlXCRA9TVsSAnZWagAASE4P+gI8hnLq+iT6YjxpY+mQ\nwx7QWarm27SHMweg/iX3Dzh35Yhj4zXQOS4HkCHXEozWrE5UwUpjNLDIQ0Tn\ngShwZ1yu9s5AAqf5M6mTDMte3lPiUp1L3MxXe1n/Kf+oRFNb7cQ0Nyew1aVK\nzs70jaEad1ocyzQnZ3zPsEci0Q/ONceLSkxyT92cCgpawH6LAl02mfgf4zZP\nplWcEqipI9dYWWeZQXwY2gyDWL8Ss0kGyVy6jbKEQn+EHLHzJY0nTQKgZ4BF\nedwGdZRN750ApwP/ShQ7Y4WRmtvhbPomMWqK+4H3Dqbj0JUm4SuUUeF6V57b\nV7iZT5Zyixzvd+be4C9qfgjXpX6Z0HyUlRet05/7bzvNC0kAdTCTACOwqYne\nXlmXl94UCucOdtvF7hYCgx6/KFFTKxPI9wiJzLtawRYwK1FLs6e6PlUekpdx\n+W4rh2SkRxLhobZN7/7CWEoOoaQJezamkI4zr89kmplZBO4HcyPNg/NFcpkP\nDO3FuvRWzJmMbgC3yaa7AA3NeqT1kyf03A5YNs/oDGigIAZDM5ZOFJYihH38\nTgEU61gqn9ONQGYCGrzWSiw4QzSYhclz4zGS5G+gMiUBZxdwSvTjxg4IIn3X\nuQ113oBfYB3bxgb4qZxYRHXPTa0nnht87Fv9FFTQEjgOoIeAgWwXKG5SV8ZM\naFvu\r\n=hKZX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClGVvVMKG5R8Wj4ZLW+MlPyVYtJwtJcppfq92xjeRongIhAInhUlmjkhIxt8x0GhZmOdaxhHypaOj4r5ezfFP9TqXM"}]},"_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-elevation-overlay_0.20.0-canary.72092360.0_1606191446549_0.6194763594348809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.baf9d39f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-coWC7p40BaYePn74k0NvLJyyHyb3V8GAM1qYmnwSq9QN1Up+gtUyyH4M5j0JJRi+ACpvawjT4efoqFURPSu85w==","shasum":"01353f580c610391afe9c3c02fda78412220f56f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.baf9d39f.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtD4CRA9TVsSAnZWagAA/AAP/0IaJw98WzFhQVd3S2gq\noXnNFmlHNO0m1jXOJWqAsT7+VPj1IrY18bd02W5+Dry66Gb4PG8eXSOjY1aS\nj9/LC3oZQIqYodRq2yrk5dq6EvDEMAciydFCJ4+bhps56CXslNFs4Zp/QRQK\nrutRMdyRPQ4TSCM319RX29KyRL36UNwoAg+FcWfdn1WfhKMi/CpS9BXIiknW\nf33+J/K+WpWCKdMAQiuP/vP8ZW++495IKx+dlrozBSwCIupZqv1BIBVBim/1\nG3P6Ff26YH4wy8H7H7NyZ4og+58nmqMXJpgRyj75jjm+295VRfBa1pqMeJik\nxhZl9GOuMLp23RCqFojc7pRn0CIVYmYylRSHU9J6Ehcd9K2KYsNolcy8k7Kv\nfaQiwuDG59dT1rCTjKTK7lqjhRY5QgZ7JRgAxMYmcMG39hu188Dl8h4xgiDf\nkrQr7NS3apZE+1Rl65GnkO3sxxQeV3w+OYbHgowrWKQaBJ4niGOaygLwTV//\ncisvo8tTvDltXLld+PffkBMK0+eLo/LJqDtGPIUHQRDvs675tNiYR6evlhdj\nWICl8M3HI1syUx8sLUTHduefEdsPJJSH6aZgN61H4dIEWoR2je4j0zYmEvUm\n3EGaZmw14QK/96WcwwhYFyFTVcuEPpggi7MD+60QuC+Sxtg4WVYyxor8WibF\nIvnU\r\n=NlKT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYXMQKUmUM89cAzFlc5iBvHxWaElyW/tffSD4W4D+NHAiEA/yDtUPob0Eh+02b7wLMxTnHyQLfE9wsoz0cfsRyUV3Q="}]},"_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-elevation-overlay_0.20.0-canary.baf9d39f.0_1606340855716_0.6913709474080285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.51aab0ad.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bpyIutNGWB+Ur6nAXQwM6lkevXPjZN4UhkpyWzV8PH+dE8OEsZX3EiuwN/k4YxMXYoDJmyCoMXvmIXn0rykosQ==","shasum":"f27a4f6c505087b90bd86795e3c924aa6f442e5f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.51aab0ad.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZaaCRA9TVsSAnZWagAAONMP/02AKF03uvHmXXdCjYln\npUUgcSuT9GKnZe5cm8jqr3bT5nJnYhACRRIPuQGZijjczPFPUTBtrT7SZjSv\nvUFYDbilYcWT8Ix1JC3RHFRhfVudGS3cqIE+6dGOIhNECAtPcYNtrh6DuOIX\nvhlLdSfb9Qd6DcqkOrQA9gYaXr5PX5T72U8h1fgb2lqYNjzzMeaEFLnS9TiY\nNCrFzBIM51BtjP0gB1Wq5Ce5/kKIOG++xjmNQEGcWzo5eS+y0uJTbxRMCcDe\npE6U/xs4jh6hvCug1bNNkqmROqJ6KgocZo+TePcdhipSloz+BtC7asCvblx7\nFm2ePx1E9lqonO4E8I7zdDVbynS8RuHzBb9qn7Tg7aG6dxfdzh9dN2ODJzB/\nkeMJKRJ3cFYLSH+/reHZfEH4IeOUHW/4jo3Ze5A1ByIIA74oKZNBhucJ4noh\nQBlBqUL3MJF3RG4rf+tnfVaKlTqvsX75E/mEYNmJ+2Z4BJRtUZx+w2TaDsHG\ngbnrzdhB+w46KeEOIaiFEkIO6+YMkshBoNkfCOZzsN7nEOpdJFJsK6sOFFxr\njHlPoVZhACgE+aQbcQ9XlHmTAkxbpOGne4kzxjbFHwp41UC23YTduw7XNpHe\nwSqfAMIrpi//cdTYX2Y23gl042B5YG2eSLn3C0fbmfg2TIumk3J6idLWsixE\n0cy9\r\n=KgfS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuaSrnHZ/I1OBG4iMUTnodOqBTMoJdZS/rQhZkst6RAAIhAPLKMxxiJWPLCXW9IHblg9i9t3+EVYWUMXnmPBcVyrK7"}]},"_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-elevation-overlay_0.20.0-canary.51aab0ad.0_1606784665512_0.39792455766773527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.8fd4af5b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+SLZZy4Y81kkN6Tr5vPZMg4fX4cIPts4fb6FcadOJuHmVk7qZFTqjjBG8dTRpsj7xsbEjd1MAnpH/C8OK00jkQ==","shasum":"2376ca0715117fc364d9b815e4f8214f79cc10d5","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.8fd4af5b.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDCuCRA9TVsSAnZWagAAprIP/1gk3jSaf093G0+ayr/L\nMHaPYYzVgTLu4Lowl19X7tvAEK5p2N1GH6JnNdS/mOtuIquGXWz5BYVHkM1B\naoSuT0+euhGLHgVH+FQpJ2gyAyNlleKw8cUkOnHZamIl+p7zzC+X41Iv5n7j\nQ9KQpXLFpN5PIUPnal4wQjmosxQAerKqL175kBvwSVADFaDQKKGcNvGWQBXW\nc+AL2Bqx0vgQc3XiDNPlTQ3oiR8RAraCeF4bcc8HAOVhGuirNODOhGwZUiRq\nf5Nc+nNuoElGOw+PihYFGRCbtsM4eyqodrh1wAhHDT01QbTE2ab+5LKBBABl\nNq9wQZWZ7CMZq3q627J1Ny1lbjlqxSLBucOFVqCsL4VeRggE62OsL518ZX7+\nP+T4eKxKevZWfDI0NgD2exfavNz92MkeeMkxauIB5mAPI2cCylAi8JzNjl45\nYOwITJWtcPyCHt06chaHKNIrenqi6j+paHkDTQlfEeFLWs/6ssh3+24wLTlM\nKKjAp2uVsMzpoT0cVaqzuYl6sfe283268tBkTgmMLXMbqeJJxuFvyNUXs264\nVm4LDKHCZQENvpfsHS4SaNLsT5rI1pVnOT4Ni5bEEFzX+ok9ZTonawsVLXvy\n+XJ71J8UOaZ/uvnLt8Hp26uIdszrPzrnIGCiqjnCVzN6ysz18uG5X8k5A7kY\n2wwW\r\n=rYIJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa4uvRhEhh4FefFHz99PBcr7RIFiou9/5CbSbOKW3PZQIgQjnS5os4VZ3J9gsX5feDD1Tm36umCt5it90JZvqBBDM="}]},"_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-elevation-overlay_0.20.0-canary.8fd4af5b.0_1606955182198_0.41586517155017866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.26d14d2f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gB/o2d8hlNLvMup/iHzKTTTmsaRaY7YOp9e1OL/nQQijA3DWLO3u6kD8QFmJA0WH54wy+nxQHuj9f3J9ZMRswQ==","shasum":"4e188afdd89de809af6fa6f986a0520d0a169991","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.26d14d2f.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDdoCRA9TVsSAnZWagAAbVYQAIPkF3nS25RwflJrrdTW\nzIi6l9gmBUY1/kB6S6qx5LNJeB7KlkyfqGRKkLDtKzCNgogqO8ofq5T0qs2I\n+GFhDNwk3TgLnI50B+HcNPtwEWRtPsgMl1Wt55ZVwdfFxHsJ1hMmTL7sdH/J\nR+NbItFyOsqt5TqZQXVPEAVg0l0ljCXDohej551RcHputmyhnrcWm4VZfLdT\n6Q8H8tLkjhJiWg1KPs56WxdBqo0Hv6wXogP/Tk1kJvEOVXfBCQqBvBvTYhC8\nmDB0/xYnyWkxdXENumomDn9eoaM1gC4UWRGZIRyrza7Bf60QDF7J+QAlPTbz\nB3fBm6dSf4bWKr6MHSCh1wlU90Why1kYIw1frACRPjse9NWdzsvyO9Z2oK4a\nKbhmLfJHJ82UrTAw+6aFlEom7+iR1cP7feBnlWx0iXC0r+DS1V86S93tM6dM\nRUCrLd+N/Sq5jACTp6xA4wxSqXRRvS/kGnwtYbLiZGCbwZNXMhLH99NKxHcu\n9T7zjecCE8Er+QxeyrqDoY09yZZubFe3BFCgX4U7rLgsxjjYwa8pRvXjhvSU\n6mm0WzC4sm54QsupAvzd8RUMVD8ljdKrRVsxQ7+wqgvCaMjExOjSz6f/fOEm\ninFQKeKdauRbGNMeTXtowmNOgfT660EhpYDoFiv/5bqMjnVC2VuDy6N7Bv63\nHIR5\r\n=7Iju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAk7dzbbk1Z1/Dq76Z46HDv/Nw+medbQdzTxm2H06FIbAiEAoFMd1vJx+kr2ZwP/9LHUfeb4/QVtjY0VwZpbNFUJJP4="}]},"_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-elevation-overlay_0.20.0-canary.26d14d2f.0_1606956904379_0.8519212210682825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.1663d7e4.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-U98NqbkWk1EGJ4ffulzFF5Og5b8NPGmyQ3T/vlKK9GCW0qv6AYAKI+c5MTxu47IkCYp/KMNDjBZlJCBRW+eiCA==","shasum":"22b163616d46c108c50947f7c2f99779048a5d7a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.1663d7e4.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDw1CRA9TVsSAnZWagAAfNkP+gLCBKIGzJO7xxB1Y85r\nfiHMmyooULfypa6nIoSnFnaxDyE5kUlEnjpyNQGFpJM/afR3J+8/9SalYdSh\nG6qZj8kwgbiGgGVwNIh+DLV68m126VJpjuBqhggrkpfFby/TeSJ0rmhjXZ/Q\ntXDLw7vd1XAj3lIwz+fvW+x+qgQZi24+eH57EEaMUo2Pj3Y8KT50kjw8iTOS\nUn3t71g4XfCsYtthbe/3j2H9ZPzxCq1i5wqYx+gBMlbxS2g79jvYXC/leLz9\nwmi/En2yH/bAK7tf4Ur/yd4kQSHJQlZX1c5bELcbaClctzo4UkaFClT81fp5\nyDL8Y4XbFqPNEwceLBRLzYoQkMVr/bSAh+uzBoEINEQVD0Hw0l8od11FYBZh\nno2Y/ES6bmGn2ZB2i5apgP+vsaMUiKUn99GQd5cqO89jOM9gE9yyXA71fRDc\n3sgPr13THkHygTSlocvd6Uv1B5YVKFBXXmq7S3ENBJuYfd7E0h4+/g2dt6OO\neJOAWD8s1efpwz7mmE+ieWbSWC+8iWNNs6d4bNjAdxrgqR7yGFo6kkxZraz+\njifxd56PqW0jo5AjQnaC9uN9FG40dHZxEDVgcIxV3OhZ8BYlwG4quja/Ela+\ntclgEwEdpEX0RCR8DwXkYTAi9LBK+xUnOI4IBLMSUSt5g0JBDkU5dQ5PPvVx\nP0gG\r\n=XpYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfRVIb9HqfxCTJbSF/zjUzqRVPT0TYKowtK9GMe3m0oQIgakEXQaMdamM/hqdvdgNGCg0v9Bf8iyD5vVHiLxrGnvo="}]},"_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-elevation-overlay_0.20.0-canary.1663d7e4.0_1606958132872_0.014868913270915218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.cbe9fc12.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0hVySXtatMGaOtU7XPd1kcDsmR2fZrJyaZe+3qz0qo2eptt0tbcH5Gz5nckeX/Yiq/V+He4lkydXiYvYtHUoSA==","shasum":"6cbaafc0e158e5ed5656d9c7761fee416d1012c8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.cbe9fc12.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTcvCRA9TVsSAnZWagAAoBMP/1kTzEWG9GLoSlxJFzNr\n+10j7g3dIIZG8rB+u0xeP05mc5QOPSSbvLlWTWpsxiXLhEIHcBvdhQ9hNe4z\nC0dxqFi4xwOIeOTrVI80/4iQUleDpBkRNAS3xSw/2jrSxjtPKP9X+sWEEMay\nVc/Fd8Kt7IpL40SRxTc+/7p8FRIZ5rB2b+ICc6AQ39lRaaOzhZebi1jC4hVm\nq5XJC5VW8WlH+t5b47hYLexEYsPH4kRdXf1E3uS8S1iaCgDLONX2bE/3gUV8\nGl7IlBjfqE4/yVY5wDrPLh9isf+7Tjv7Wg4Rkrp/oElPA2ickBL2tH9ybAsu\nGkHV68mS8b6zWumdrKPNXTiS4nb8Z2gcEBAJnfZhOEJBCZbioOF/9pID0bWn\nWsiixQl4qD7ntW0zNbEAb1EIcsfg/sh4808S+clc5/8jWc7p6nhiPSQuIb6b\nRupTz+ofCMHj4pqX5AyZUDHqPbH1YVq5XYMEpiy+BfV0JviHX0WMjyN4bLQH\n+TS+jOE8D2JFp7dZ7uy/WXzcDRN6zkygmhGPS0LZcuSiuHWZWkrX7E7L80m1\nprV33dYeHn/MheseJM37upKVsU5NGeB32m29KwL1xwSZJ9l0Bmc1Bm3zP93t\nXSWtVxeWQudnHJKRc6W92n/ZzSQqmXtU5dnsEHhHfteO+hYqYlPM1ak9X5RV\n0v54\r\n=mSDe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbAyTjfn/la1gcNStK8MuNalEnd4Xq+qicbEvcqK8VoQIgOLN+Cjx7Dv7YAPQTIKt8+LrIlzNqOIOM+TGzT4UKUX8="}]},"_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-elevation-overlay_0.20.0-canary.cbe9fc12.0_1607022382798_0.43405330365917627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.9755be10.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/6tF1s03xVvJptLOhFgUFYzHg4r4gzaRokw9Id5t8Z8rydXat/Y/BzA+3rnszST/qEwF6JYLCx4PA6LeY2Ix5g==","shasum":"a50984844fda78173c49ace1769a2a01d5817155","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.9755be10.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTtwCRA9TVsSAnZWagAA8U0P/2p7++giYW6mC/F9Nzd0\nemdJkq0h89zQJfjylsk7raAMn69hJekleaqjSFpkh70MXmlksTKsPhitYYLA\nqIs3ZskEeHDRc/ZhkwrYgar/1r2DqFanIGwOWXsQfDDdVuPvJVgS8+ljUvth\nTOOWun5pnbJuNL6gW7qkJQdgWPPOVG0dOZD7pQhqfflbSTHmTXzPjUTAjxpW\nIk7IW4hUsudcmEYVQcwNcjJcMI495UI8ld2OjpSBGLvkAL5FpMFv1ycaFtr2\nCv+vAl9feaijDG/X+aoY5dR93Ku2nYUwQ6hz9vRwuzTlLmpnWqq6B0qIt97t\nBk2FqTYId+izXhu+XGm2Pax81GI5oBUSBrlKX4Tv260s4NlPMjbiNFUK+rnx\ngfmImKlTPolnZf5At6ajC9OK2dYLG2ZFIna+lJWBtywtr8F0k4kOCu48vzxH\nfErFebCWJSYZmdRdbuv+r4Zwg8omVenVE2uv9Ccmt8z1i3CGGGG//4xesoaF\no2MPj47trlAQEcSDaqbbtTzwh/HxU9uQkkXsDaDp6wpimcWu/Uuz0QpuJn5g\nWuMbtKjJhJViIXWWwN73zbqofEO4fsjVYSoig0DGu7h/cY8/T88wiZcYGFku\n+AbLO+vbj33ns7kB0pmXj9FvjFY6gwhy/Qb5Q/M39b8CFZXDB0tQtPFLb57H\n2yCg\r\n=hyIo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQciS9+sQn3USZzEusKpi8QdE1OpLH/HDTZ2kXnuiV3gIhANojmmIVDaEpC125hWzIaoZ5oprB3cYGAfUh51N1ILjP"}]},"_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-elevation-overlay_0.20.0-canary.9755be10.0_1607023472312_0.23259370358438258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0-canary.3f64270c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oD39Rw6Q6AAsWWRXXyOmjmCU/poX70kRWmxTtIQxadtHM3vhSWxIssMojBxwfFPXcwdgTqiCDtYDydMd1D4mtQ==","shasum":"76a3cf58aa6053acbe70c455a2d65e7fb3d2524f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0-canary.3f64270c.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1JCRA9TVsSAnZWagAAcG8P/A7Aw4JNCe5X2vb6zUJN\n1CSILBrPHuwN8ntiJYrlaCHnamYy7/Iz4Ib1p/WJn/X41MGylWUFz78fnBLw\nUp8zaNkZm6fpBvBH5WCLB8oQ8p7WSr/w9y+mQhQG2HBSI+BRM9Zkc3Xh8g3+\niji24DUkxGekNb7my3KDzbMBfA+OJC7r8i8Frzx+1vzsELGhp6uAUfNySNzc\nwrFp0lU7TSopOjlxeLpmkAAjvi3/h/W0J4CWDFbEoV5fcRIZ1WEMbCcMwnU3\nLEAn3Kz+CVbZ1iKBBs7OSpx9pEfMeehiOMpXe9vQNY/nMx01dFGeLyGyeh8A\nMAr286mHaf2sonvInhUid7Q0BAqFb12LHftmy8tuykhX69rKKRP5xzIMg8NM\nFqcZLmUbf//KWtmu8vsZU9BTBt5MiXiXE8VUG9qvP1J8sePhvsAut4Fq/Dm4\nxXRc0A8sWNz1cKufoubLk7Lmf9GgiP7LH9GJLC/V6hwBwtXs0Gv4mVcSJbjM\naam2gIJvxSJhY0Ehw1nrwQNZQ4/hGhYAy9FFxpj2RDU0UpNRwSFxRDcymK6l\n+o+fGWZYRjZbUP3EGppQ8F+EKTiXY/HrR/RABIQGo5L2kFCsXP9854dmy9Io\ntYv0vmiYJ3THV9XJOG9hiOXeZjcQVFiY/mGDghc/sLmyvZIVrBy0KzQAAj+8\nWP59\r\n=UeOP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxh/FyqtILiYVH0GR+h2aTSUJGngNHKtTZ94M9hYDaygIgU3rba/svy1+3/d9jgolUp8OwQgBJwVr+uS4gyNJkuSc="}]},"_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-elevation-overlay_0.20.0-canary.3f64270c.0_1607032137329_0.48393449770359687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.d893b14a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MuohXbe7TB6Oyj5q5IO0j4Qpb3oaGN27BFjgRVeZpu3DjvlMLM2UjLPk4eVOdZNBupr1691nrjOJsDWjMLlJVQ==","shasum":"ee887a3fc49c09308280287d71558673b684a7a2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.d893b14a.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXACRA9TVsSAnZWagAAveQP/j0qXoM5FUJWtHusLNR+\nz+GCTZaxB95KlJiYgwVicMbg/LYytr8TG8WcXVuYWs4ONJlTk6075jsg37Wn\n8jaSrPj8shGzohJMzUevKykTvUvykZHKTDvJXEXe/tagp2QovXdh/drMyKcq\nfv60dxmDKeFi6bGmR6fNIlKD8DpCaLOIRsc5ZtDLolR35AxvgdZ3objamVpC\noZtq461KZcehsW81hRhBOa98jR3BF7Awbxc2yFjdOwiQLekkqK6Y7mp9ZgaK\nNOqTKdb9FgHch62mNDUMMU6A6ndlzqMIC16jopvS0TL7OyZCsVTfs1M8LRbz\ncl45Hjyg8vcTUAsQ2dUiUB4DEk7mGLq+sr/66WB21WcKm1q/3Xfl/WBi5W2v\nATjtX6THow73B+wCmqUHkohU4e0HjkSkvnMQF8JM5zXv4W6ZtpmMw3vzR8/X\nOyuB6T0imW5OvIIoGaE/XL2UywrlTO+7iJ5/WTuV2Uv5tEYkesjldDXu5Azq\nN3jClpNg9Xv+5eLFqSVrNFf2sIB6mqCv4ll7fBAjj6PHL+RtcBvoJYN0tx7Q\n0u3TVJWuzcY+32RMs+rzb0Kitc7DTiMjLhf8ZiJA5TBdo1MWiy/WmG4B9jlj\n4gY86uMt5/tg7sFnYKJasB6Aey1cAInYqEg5LnRhKcSHpK6Cs3P/Jd3r63iQ\nYYCq\r\n=rq1O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUTVigbKGe70YJgi79nST5NwoCz67f2J+/fq4w1KnS1wIgRlImmnUmcQ+zT2iwXGzHd1Tm1M8D/TapYEf0lkMopeg="}]},"_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-elevation-overlay_0.21.0-canary.d893b14a.0_1607034304015_0.5560073254374083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-elevation-overlay","version":"0.20.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-oEXK8CLduCqLrLzXpDsbPaaR/H57LdQo2E0uNWk5IbSE32Vz1xcf1avNOfrr+kXgIerH7WSitb0cKZ4JCgr/lw==","shasum":"ba6bb6460891595715f4781bee49c79f9298af93","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.20.0.tgz","fileCount":16,"unpackedSize":411129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWaQCRA9TVsSAnZWagAAvx8P/1C8qe+7YW3uxbc+04tP\nraAWPZ2fXpSQsgboSLdnokfOZ0T6Rq3Q/TVa2vJqwZCjXxCSpyd/XFAPylHD\nIH/iQCOMr7knyATaW010f6zLYywojCu2pXENgbuoUSJEU9I131gnagBS+9LP\nae1JRsgnvdvmH5QyzC+xJiccHNqUueK279zOsUrZoAiokMdm9lXyap7lSKWI\nUeQWKU7vlhPFeNMPGanHxazzeUmllMgq4jd3kuyvp/mUi9XMJG6xPw//IPk6\n0Tw9ai+zh2J5dGviZzrI73cUAnKrohiNRFij6+NhHqrvPfaGBIYF3aeN9ASh\nXvom7gI2QR66P1g4gA5leE2XAk6uKPUX87YjfVVUXPOp01jcDgS91kgmwjcG\nj2J/+9VJOWSlv6Ge+L3wYoQiXRd33+X5zQEvGbqXBxWeKmuRFrLKej9/UVs2\n4ViczkFt018abktHE3kozA83gy1JlTknR/cIj+m2pYh+1/NxMDcDXZxSUMiF\nf7aRaQg6RCz6S8F7hQ+HpO0lSk5bIdeE5McI+tCoV3RTi6fXBPdSOijSAK6t\n0RZBFqZfSnqMbKhDxvUUVIx4UzBSKvPK4jk3go3rdhZ6RwD4zSmdH+lAqDQZ\nYA0AzNt2Fl/X/IMpYHcZjbFbH5wwiCB3QyAQVP+jqxou/mG2dNMMJpfDaVJo\nuSS8\r\n=EiLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICisPb2mV2mG2NO/B+c37Z9gfDCh1OotV4MphwODVUo1AiBm6zgMHFu/M8mjXlnAdD5RdI3ORsKjIn0mEDRSaHWzaw=="}]},"_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-elevation-overlay_0.20.0_1607034511793_0.053975885958994496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.47c7d7e5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rkN/zsj4Qfx+fckqSMwuKeSjyM5znWRQRaZ9aHkiZIGkbvVKQ+/9dFu0WMz/buMgbq9qd4fCK0jdOHnOkIv5EA==","shasum":"9979e93cb89d0b08d075283a076051ee6c84de39","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.47c7d7e5.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087YCRA9TVsSAnZWagAAcwQP/32VanqyjMA0mVCrqzOA\nv5xixIVlM1HkiLvZFzAsz2Gkt5NSxPt0lyNJb8jJi496/amLFnYo+ENloWMn\nOVaZHPtXLBoeNbpb5vQdlZRa/chfZKuc87hm+D6y1BTo8ZI0/fmFvBNLYSNj\ntCTVI1AJ/3VspUiOVk/jfJ2Ekygd4c8lqVE9Ug9zTAw5RWvEN977Z3I8en1v\nuqdkESqIKgLF2ZB508VTgU2idO58Iu0f+V2e6QtUCswpDtJsd6t+EVU7fx2G\nKhWCXyJ9kQCuEW3aXrvufvTm6T2pWMdBH+7vnCei+6noTK1Y6YDcZPMNGiAS\nK734Cgk38BO40hLOpTbXLBVMKTwaiCp08zfBLZQQWUghnPK6F20ioU8iAMMf\n7jCWcbG0Wl8vhFyI+/YRj8J1cyXPsiQGQGrN7meqVuh8E7wIfvrXl9lxsj/U\n89IlygeTy/bo5ATBjWDDv0knsxgnaN8QetOcdqg54vKbfEkfE4xxIjiY+w5A\n/6kHwEVES5pK7WSxICDMdCQMCkqLpAT75B53o32N9nbu5uYV0n/1fMY4v0xV\nH/xeRsfCRWfxjulCaIsSlP40YSf63LIXFqNJ5BsCzKyLNfWh/Z9pA5sbx/GK\n744I4vla6CotlGL4YHzqo3v5M3cffNTBhE2NimJ7jDDdUqNKBa6kCsxaNmno\n66vu\r\n=CNz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmwJnZ2KaP5UKzTtvjlcV6DWy6Qt90KML3WAgPC0MUZAiEA7b91zfyCX8jzLeYBoxhnmGL1PvjFOzqkz41RSUREtvc="}]},"_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-elevation-overlay_0.21.0-canary.47c7d7e5.0_1607716568346_0.4254990465413768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b304a78b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-p65/AMroj27pBTU088H/RbDs+l9imX2a2V8fKPXzKkYjGFT5fjbRGGqleS68jeQVGd4uzGrt1XTTqCkzS9kDTA==","shasum":"053d5269da66aad45e8e458cdd29e588192b305c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b304a78b.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RZzCRA9TVsSAnZWagAALIMP/0QwCgyMtPNMnfheYIT4\nodUp9HerIBR+Uc64A/q3hUXQK6nSqUVpus2g7UKDahvE5U13I6YxUsqZCWIz\nDAZb3i7tC7Fw+lJJvUkA1tjbTk1VFsMOngYt49XiNRIgmat+gjP1h5dAkn0t\nXCPYGYw3LPZTKqlU8/HoJYYoNRre4xcli9jnTjohWJ05e+s9wNaAAqMlaNLU\nLBNvwrDn1V24+oNqwttaXFiiz2t4rtCopSUaULxnLYPyXTA4BzaLzxoj671W\nT617/1N4IK+RZaY6rpff4QI/sFcPDrwZlAASUXVA1fBMgWqZP0TCcsU4dkUn\n59idAZv579yfV/8eJoIP3HMtVemgNMtlwpu0MSpQxN9H+7IW7DFaXYNXBLEf\nxka+9P8z6QejueURryyZun8pJE65J+IbzAIessRv3Ab0S2J6NN04g1x1xGdq\nIBvVPL9QOGmIUHOk8NgE+K2cof4gfNG2ibNqCpJjih0WCelE8uJOwQg5APuD\n1YvJWpZ3fIHg4Z5zCNhfe84xctRKbBxAUXjV5mdbNxXRuM0EPTODgXlZxKpU\nVsAdnImJqLF3XXSOfvnQTt8ifc1/m7bINQO+lWn+nY4wMz/QMmezjYk/wFCq\nT+BFv542RUUS7eLEXVHeApbFLSEjg9gPXOCRwzvnqBOIS2Y0UEvYMgLmMYWI\nvzku\r\n=qHiP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC41WZKpKUQriYb/pSFWecE87aEq27DJaluRxgunFR19wIgWxz+3tmHpoK1bVgxbxidzcvBSAykM1S+Pkt9gWTp9g0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b304a78b.0_1608062578674_0.25426500810991026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.777c5fa4.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VsTV53fhMb8gcmwFJLjVVaeDRpObvRMRCM/qCFBoFlvrdeGjr8ZF53Rx7qJP09LaRr2gpQfvhj+jEeYrOr4WAg==","shasum":"c44831544a22d27e8bfad272f32455ff63db5b89","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.777c5fa4.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHMCRA9TVsSAnZWagAABrcQAI0GClZ9+TBvSKyxRWlO\nSLh/EvgiBv+KautUT0EuL4FnxJoE3a2kwljtEp2kf0TuYZNuTny2a5t4bFj3\nr+2KmalHAeG/Q1iiLT3NuixDvhqlgg0aJ9cRcDubtkS2tBOlosWC6ZpiK9iR\n1hheISTqgfAILiTe9/zWqbaoPX4QYBq9A/EaUspcP2T5zW+aC6ZBzwenor1q\nZ8iKZXZu4q416FfcmMW954R3S1lojno4VEF91F9UTTxqAUmjyAgyeGN3Km3c\n0fQK/fZW5dAiuYHPvmZN1hMuHv3QGMQ1/LimcwRMDf/FFoE7pQa0NyAVzGHp\ne12cgmfpckqcQ1HIBQagcn8J3oUPedq+M07iRbjL0d10axztbFmKEq2/GmZa\n52nPzNMHbpWt3uUdNcqYgVSqpVOsIBK0xyIOkXwiKlommpGV0ygOVrPJocvR\nYNAsUvrWtJBo0pvoILoWmxDlMDTJvS0oSb5RSXm3dVVbHpM7IqwBZZ4o3XoJ\nxSYzSPofMrvlay034zj8ccLMCPw60Spl+a1mer/KI/jdeCRgZ0XnkQvIhOf9\n2JQFyqtjk4lmGJppgbU0iAttVVKXX6/YNmqR9He5MJqPzmr9Ehrbt6SBQToK\nwtceZd7hQ2TXG/3U/z/GMEjCaFhmkjbsbRWbBtZTFgniGqe9s/fI0nWk7zwo\ngraT\r\n=/75o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2A6UGfhDpUIGAUYSzU4ldjZ1I2p8LTLtnlal+oHE/yAIhAJ4Kk/gY6iIASvLIp3j8NB5MHPmzDH+BtYIuipoxvx8b"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.777c5fa4.0_1608155595625_0.1297217976337861"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.635c7996.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HHDEbwk/L4OZR4j7B+3L4NziTa4enKe2W4m0nTOT7pkfhw/OZweYGcKHs9fQewUr5N1SQjTQ0Q4GUNcw/2KPqQ==","shasum":"e484f9f5214bd63db5d3c5295513d5c36106de88","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.635c7996.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+onCRA9TVsSAnZWagAAx/UQAJR4R8MYvtn1rWaPtGRI\ni5nTyRQ3Popn1FMEIXwvh4mxC+pm4/uau8aAIYncgR6rtBNkkPvvxPT6CfIy\nmN/26yjoT79fezwVCp3tIAZjGvwPxZVm22z7Hb8iQXYnrd8qn2yE6BJfLcXt\nkPu6/xny7DQZtCm96+p0IouScHZQb0fpCv/hQg8Ff98ZwMuyqBRwokopcrwS\n/KLWF07w6k+2rUveKyg5JrSmIMzZfD6/ZdLiC2PeRemO+bX0YJUCo5XiBfOf\nwMd8Om13w3rlvtOKmLJAlB/qF++fm5Mr6kwYt0d/GFcGRi2q4wvuiimCDoMx\nKMiFWQmBT0F45Tp768mdH0bdnWtFk/RwaFLjcwEm33uO4BIu+TTTOdTrRFbS\neggtqtsWLeH5Pm2EORl9sbq/6nM3In9N2vjxVprI+K3Dg+TkHACEM3M8qKNo\nID2m48dmLbJUwO6KwH9FCalyk2BhWn+zTiBxqJpW5VJdJsMGyQcmK9TZF1HZ\nQYU9IwBqTZXdTSpyVLAvVEKOkly5i5sPXFa1WvKAHM+0YSeU5YYUPMoz/6qq\nc6kQcDKy7Awiww/LG38D86IZLAXdHU2iQkVgI1JeBacAo94GSoQx/ESx7RAa\nHrwjBW9RMR6an25tGjuWR6hBVS4yFukqPMyDOp4fPv3pXkr9aq6w1Ja6xi0f\nCy8Z\r\n=vTxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVOXgk2F5POGDaGQTWP39GUp3vUkEZ7qo+xxiTHGzOsAiAcctfymrxHSUE/YYfn0xmofdFQwrfOzQwal9BtZogOUw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.635c7996.0_1608247846763_0.9895600154939113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.20b0045f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-X6f3iQ24009JgRhjL7EbNkmgmgMlZp+EvGkSX/naMq8nCJ2AIKd5R0XSubyhXyyFg0LPsOtR9NghRSkSOT5u2A==","shasum":"a1cb0664f6a19c0d4900a48c0f542fb42573271c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.20b0045f.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+4iCRA9TVsSAnZWagAAXJcQAJzKY74BW4jnOIyxSy5B\nBdF8/K38h6/HGKA6S4qPvqkXXjugzFj4L75aAYgVRQxpkx+tY0UfSO2vpeVA\nOj5LvjbbOt1X1BnWB/vT8JaNJnVsji0IpI4xPwmHKBBeJ4USjNRewswLJLT/\nVwZXcJ8fHI7w5P3xNI9OtQuh3+SfXeSLdqTr/jBAduKBvoiDs0Xp7Erwy/Ha\nO2sYR5csPZjmPe53rKckDSf/OwC2D4miIijKcmCltVK8k64O+ylhSG18Db2n\nuxowuS0A72NGnSChmcqU1afEyOlMo9gXJPC63HHrW7K09gUS5n5xhyBr8tCI\ny5JvcsaX/aFnIfegTcT3YeK7qkJ96JFjMmAR/eGmfr0TmNQYHpgCm76GaPX1\nSE7MQWQ/tAMkhUIoSzDJ7Ypp+vNvY0J5gLOdyXGWW2cjZ5IC3Sfed0UgtrH1\nWiRFTBa4KLJrgqjSXxTXPhRYuPyz9nZBQth+gepfLAvuwC7o5q5sPWYl3xTz\nzhace5fjylui4Mnu65PoEk6C3he1HvFY9lAw/ydEpuQx7/aBot/u0FRW9mDN\nn90q8VCcQU10b7NZbW8S5qmCpGI1nC/cHOSAy/AL33x4gMvJumcfV7kM5xEA\n8T6fEEGv9rQGTk+JFxLQGfafAx4Y+VxpsBPlhJrixRAxb/1jIHMazpDlOgGV\nJ3pY\r\n=1DJD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAegqtXQIsKGerNvTGa+URD0rw0K0JGu9MFAe6MPo/SLAiEAu+8pcNZ7gmHjNlB33DM0Oxc6UbWtKUTDchL530j8/C4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.20b0045f.0_1608248866224_0.37916537226422053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.41f77000.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AH0NCtyp28laDvwXbjgHyhDtMWnqNdKaKBOjZJ1a6iF1zpR+SxQlarVOFsoAi+cyyVoGYBNrUglOtWh2VKGHuw==","shasum":"31ae8844a0d024e0e75ed9c206f86875c888c9b5","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.41f77000.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/kPCRA9TVsSAnZWagAAtqsP/2s2PMaeRPR+VI4eQOeN\nE+mZ5++DHa9PuaxW/ptuCnVxWvBcM9APLAhk56JoXKCNs2RjxrguF7eX1QUm\n8mGOs+10Ut9CAupCH9T77exPSHi3bCN0enAZRYNhvTz1YcvePamgnAaThFOa\nDLOwaFKBVuvzmqGTkEQ3g1Oa5v1fw+FiWvWKwQRUILwc2iyauMOFJoim9XfI\nZ2OkmCWP9w0IMCxaqVldGt/OLzKYh+1baBEXI/cpjgt38kOr5UNa8wbbRL4b\nNrMHagtbnu4oe7iPFxpcmHQ4frHgCFd5nJeGmza/XGFiFQn5KXGSqGITaTQ4\nMS742fXFZ1sYDt4ma/sC7kzcqS3UMC1xpNrSabqueI5m6Nh5zLcttbk8fOaW\nMCx+1tOkYd8jYK0ZbcVvBouBE9z4+f329sK5F9+EmkWKS+khisGn0m3Jf37W\noDGFu+iOJK8B0mDfS44JpKL7cZgVtnTOoUkUqilLjCdGImmTD6WRwJ/ntVup\nvyYxpKmkY0WIYiw0kRYcD3vJgYPpldCpuV0GHq5HTqM3/FFpOdIJYXErBIgC\npT34WMFS2khlHP4/l6ycPG1LgwjZA+hw+fhM38Emm0PmEL3mcXaq9p1AbMZA\n7M2d5zwPEALxYoTaRafKH2oOVKuJ8Z8Yt2QuTJaV7MeQ0gKHB0TYF1Gb9AFr\nw0d6\r\n=nAVD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8qtFfPn+p2BXti1qqkBePVdTyW0tCKcquyp5gKdgzsQIhAPbOlOzpFQRdKYfNO1PHV388U2IMuJ2Gq5Atf3ZSPXxg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.41f77000.0_1608251662910_0.1527458586103594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.afe4079a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qCyC9zc4w/ep3Rgbj8qmL1bgGHKBtzSmQYDAnDyGr6cLM4XA6doTwhNQqkSc7TN7cUjngOHlncT7bNVy4iOQXg==","shasum":"0a8dda8836909f5f245518ac270820954f3ea73d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.afe4079a.0.tgz","fileCount":16,"unpackedSize":495227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i80CRA9TVsSAnZWagAA9kQP/jfgI48xFQFy70NOQZjP\nZXhdaLQj33CJzS09G76ONlXbJ3yERFOCArNhENbfNMh4fd8+9ncIJUH8pnyZ\nID3Ru+7g/UoiJW1n4LMD7x04PRqaAM/a1augF3NUELJGcabA2ckHfRUFG9wg\nkHQPIexeeCpPvh7JhY7NulsBzJz1wlZy0KOnVKv64ETp2kAbMUDNNNQsdwf1\ny3QZ11yWvhEx6SQINdJr0lpDaO/Ls5xDNI4C4nmZRTFA5X+xuQZp6El9h67E\nKwWsKroGFyewdrsAkC0ibn9iHEbWi2eb/0oTwu1jZO2pq3UZiJ4U/XcIIdlm\nzZZX2NeT9mGv1p5PRbQdWniP1OMUYU20owhtyRxnZdNX4nDPSXRVafhAiTHq\nwVlM51l/9/AIJLIXCUadgfjgQvfTOeosFKUdHMhxlZN8cAY42k8T3gTklK4h\nNCVRu5EFUt+vkhjlmMkEaMvloKAr5176tfLeHFUNtTqAOc1o1y8OgJ5CYjRG\nwCHZHbrNYriPB/55y3ThSaLII5Uuk50o27r0Bz33gAnAfsKEybvX937OkAzr\n4OlQ/2i3Bvy92Tqy+fLL9Rs8IzgkfXdmzgW/OkBjZHMl8rbbY8C520+8zusc\nxdErwA19p5WAakjiNMko+hcZ1GFiwM2otu8w5XthnXZtypwQuqR0YcQ/iFlb\nWBsh\r\n=SeqI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB7vDIggFcp62Q+8N+fYbi9TWit2Iooqn9YiP3E64BpnAiEA+iXINryNcXOD5DHqvDkssFuWoUf+RD3DPxHXeYgNcE8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.afe4079a.0_1608658740028_0.7707543893747448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.407ef8f9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.671d72d95.0","@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RPimclB7PYeNiqN7duqRy+b9rlD37CRJpYhVZd+Qf/XJhjWsvxUSmUBzk1RddygT8CA8iVGimqMBikzTMutwQw==","shasum":"5d39e63d0c64e3f305887adb6f05b145060ec353","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.407ef8f9.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QbmCRA9TVsSAnZWagAA8GsP/i2JYB/9GXTcFpWBbyis\nokIV+1+3GL/C+1iGVcjcB6N6euZQDnR4cyV6vXtwdj+XzxGLLeOcnMaXIBmB\nWeqAaRJIywQ668l0BRo2xMdVjSj2dh72UeTwo89p/VPU04xtuVXRAzck4NnS\nQhav+A5wyN2vNI4mxCgK1/T0WnYNLgvy3N/ZP6D6J+RUMU7zDqDIVGgKxZVY\njkih3n9RG2oRZctSj+88GoPg2cvpHGIW2V9b4O3dUpOROQgYABbnI8yQjNtb\n8fZkLdij0viC3OBoN9HKkO+gv4zb9ZZLs2NSXuo7x9l6i860OOAbxnbbMA6r\n1q5rzDk9qbYOY+qxsRTiS4ldLMB4Fo+BhwL2korf3eXhY4BGP0ei2zYwHW+S\nfTe5BMNOhA76q3RoYgKVH2329GJFlAPbEdUlhE8VjZR+PJKkUpSPEwyCbmMP\ndRlSxdbLY8G3y/elHOBYlNgmG+7+u4QO9VqxnLZaIjjZHm6aEbNMCQLuGleF\n5ZkDbtnzF83pJVfSKa3CaZFLGqKbweIGnAjzPSkhwDfo/ztCYG3BJyGlSxo0\nkUYEf9NABo1fNAcR/1DQ9NZ0CbRg9qdIDBPI0zehuexlMO22JoVwf3b9cSNS\n326rB+a3ama6NjWiYvLPfCleGdcqOhDX2m+CY8ZwMi4zUrcWekiZMUr4WLVM\n+2+9\r\n=kX5R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICw2x/begorZzvev9bvjv3lSCoQsrELlyWxV/hgrm+/zAiEA9kUH5U3SMflp8GLa2tKG5M93O4NbQeilj/U2y3TMWgE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.407ef8f9.0_1609369317575_0.6718126126601232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.2e26e137.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.365c69360.0","@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MdTYfmGi69v5ZetmC9WJ0dXrDuKkaWkN42NR4rs3va2jh3BV16DmZcWmIHsdQ5Z9sh73Nl46EJwc9e8WSugdrA==","shasum":"ce8c0a12219fd0c18c97d9977076d2e8b69cf95c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.2e26e137.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LSQCRA9TVsSAnZWagAA7WkQAJ3YCCB36mR625/vwqgW\nnk7dvDzfFrpSlkTRhxCkCnDFNl1UsJ17Bduzsqqo3C4pcqKi3FV1s8zVzfSI\nFjuZzoe17r3dOOa9y//yADsyqazb+7VRWkzK26patAqAVd/G4kVEhFJD3XEm\nT2UXk0y+TVHQbEDCYYogwcuLb6TYG5kEEGHlMjnKn2640aFM4ORxyj3COVHO\nY7dFhfpN3JqjYj/BhWNAxMSuBpogmWAOPmT1/NIXv2Ki3oYJ+1GoMjFMgXR2\nFOmyOZkx/0AoIkPAmfSDLCWAPYSBN9BzXAcyViUVk2Xt72MtijvRPWKuJjTH\nkEdmPjkMoNIKulW5CAQvHLTXui443Fe0X6Y8z/N9XClH3skVtNxB7fDOHmNE\nfVnBZ/IsMtijch+PCzshBcbf82a7CwfljJITeNr6C+Ud6DLnHk71c7xonN/n\nvCHOAAOhTOP1VI6Mz0qUmLtFiqWuMxBeNxg87hZJA6dSBBUDk8YHgk9nBldg\nm0yy1rxBP2GjPZDpV+BaOm9YXqRUm0AqPUTjLsg6xAqnPynRpv6C11cq8RMO\nLghhlxiVyt32pxRcNtwsvKHNZ7UcsL3NYdIcMtTV1PD/jKOqkLbz8vSLjdOP\n3Aj/tjf043EMfr3jVm6AcnvnNqbLOTgY3z1PFeSZ+UQYHn4anCCTewCXvOGU\nKIts\r\n=JmwK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBfcB6ObVrPS+DWt5GL6PLOmXDzzIL9pb0bNrva5WHLwIhAPicGXOsdPbxrushebiaRKd2CFCS/+p2gZTa5dB22tI4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.2e26e137.0_1609872527608_0.12987296163771678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.9009f6c1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.abdd10065.0","@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IpGElA5v46h+f/U/evsO1QOTnt0MQ2aUi3pLt701GGEjOL8tUzGTnHY/Zn/Ltsozr90buoYrPzqgKFNCfn8UFw==","shasum":"8cb41a9e38785610ccb2da76a945e437ad2d5e1c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.9009f6c1.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LgxCRA9TVsSAnZWagAAuXwQAJa3QjNFZUL3q9w7exZE\nB75S8dy0U4H+w5YZqbppo40tNZ79wku88ihBC2ITLpMEh6aNf41UqUA8+FaP\nJgSGrZnaYe2L9f80FDsfwnH9juiCnkJz+SUelq74lFkop959KCdK+izAePa/\nPGX63CCXX0BKbcRJJWFAi8agglevzN3E617wVDYNhg+DHCFLOBCPB5iCrxZo\nsNmqNYwfbzgLjAH3FTKycXSE5CTA3b/y6PXBTnFg7NMcFhLpJz5IxorWs1xp\nBMXk9sveICkoFYAamddbrq/Iguzeqe7xmm2Kl8NsuapEFoMSixoJpPzDZaUk\nfDzEYQAGjms5HyxUxPyXCxbGkdQtUGI6kHnVGVFUMe+ZfYHC8+tfjokGFbFe\n9MFjLgACdNyEar9CKwpU9ZRUFe5Vu1lzOCUV2LaYAAGawWuGPKQq83xvKiPD\nItNMEtJaqLu+VwzCkX4Z348TPiu9+FM1/weysz5o/M/I15QM+dg8GHQY2uC+\nMaG1uuvO9qK6FsvcWKuo87hBE+YToqHiWW/cICK9FTP044ZOTt/BSD7khdhq\nU7W17nGhV0PSzHdIFh8lOau+WjllAv0C3uASvrFfvkVITJl5g0ZRlhoaQ7Wd\n0i84Ijmdn1MScDmIYp/fdiDnb5vPNNPW9hMeiKVYK8fMvS+ax8EBlqtH+QTn\nLKtf\r\n=XMsc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFchScLYSx4NdX/0hcPD5kfxyRBiUGQo9wxBgF3WskldAiBTks/GJxNBVgWNJ5mqbAueheVht1XjYXNszZR09y7TNg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.9009f6c1.0_1610135600653_0.5368560405901446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.ee99b646.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b8a1a58e4.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-c1HT6Ah6ucOn7t06hGXVbenqG2dxacrwiLkvNRVU2s3MpIslTw0tvvmtYT++9bQW95QY8eezTm+YIYJrIbJHVw==","shasum":"58b8d481331c0ded2364dfd9669b170632b224d4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.ee99b646.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NolCRA9TVsSAnZWagAArngP/jze/ZWZhVd1AahmGbt7\nkoYqqEOrQYORKsC4U7rsJmW5QngXwmGE9T54AgOZuKml/Q0bM4svwvlKewuh\noArZV4V44KOPIisLXDpliBrg7JBap8RkLBfebXdZuHbG84Cy+mdYoBHae89M\ngaEiO5BVyXmvKNjHpIsPRDnHl/vxo0UMTNfVnSo+bZu4AAh45ae6c1f53Qy4\n4+a5V9mtENlZj2dKsGHXm5xIeOsFw2P0ycq33sqYCrFE6EfW6pOIgqQP8FgI\n4tYQHSjok+zMFXKY3YhMBVgBNde0o155evSNGr6kDhHRfRHWHGdLhWj3pZ9l\nOV1+tIgT+15vy28jasOQQsfrb4mQv2SyTRMzpSSGMwz3jWngzsCym9bKeHRw\nzOgcOVEUwzOkD3sPMd2S//i03HyBJ1ZICxYWZIl1YOhF6YFuVKHK/qt9SuHS\nxPisMGb6l2VS3yJUZ8jY3DQoQfShXIaeNhWrxYRsCAM5A4cZ6XPrFJgeM53Z\neykf7VUIVQ31YiKav3yEipKpNnER+Q04RSUvfiX4PSsE4gEzM2jgp/fOYJnI\noo4uvhbigFybAzoVaBgBaKnTMzVvWhL376m2Hxrs+OHGJKkRrVp36+Mcs88d\nRefo/qwYxzn2gnmeUemMcwviDb8Ct83jlaKqedu72lyrglqg5qIR9Hz7KKXB\nonw8\r\n=V/hg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0u8LFUZ7X4vpWgbwci1jMchGgIbdhXReB05Re7H8tjwIgInBYtCgadvBQ8cnj9LvgmBR8K6YLlddh/TfMCxjQoMo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.ee99b646.0_1610406437019_0.7672013562917759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.740ed33b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-K4Gqp91dAc8kWzugsTrM20BDv6kmTFNZNcZl0ZJpXsvIu9ki/b/2+M+nPxHthVPJtwEkfP+vJmY7Rrjpv3SRoQ==","shasum":"3ca82b554aeccb78a541e9d963a89e9a47a72df1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.740ed33b.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eRcCRA9TVsSAnZWagAA08sP/jSWz1a+ly+TCuBXCJIm\nqldHRlcPKE/IfZwCfHDWgYw9DGUxo9x25eY603mAUdQk6M9moZTcjWNNCobY\nDfsd/12t5WYOVxNxoa6T5Ufex7pBUp/jhgp0Jn81tSEa8L6oRqNPJwG6p9tk\nph0W+Fcusw5skc9NavP72db/vaiALeq7NK+26kLjU2CN7/3fq9C2XWqrKV8v\nCZkcHhUkx6ijPdy4muPGIdYUt8YWLwD9KHwdHqY3LBSnpRB1AQ4j5KVZUXIN\n9/GUvtMpW+ZCQPw/vN7FAFhub6gxxy1EhNw9ZcI4hzMgppj5Wj3uL0SSPqku\nF7q9wJl0IMhYVngakifN3sWFXx0Av5/E7zFXwFeAp8gOfWCa4vdx9A3tOkwD\nHU/8JaUKyCU/l4U1xrs/j7/4QQvxRdJkK+YwISDx4FMyWtyXC1N2FFYTDCZO\nmbcnkCwr2Yla17/6RuNl58fHir8ssocm3hEyGtXa4pn7bvOzGMSSseyp2E2W\nwADfqebL6On94Ny1lrl0rf+hvAaC5EAmqmiawraRv7ZbXD5vAow2Py7/rPIK\nUyCe4QIVctNXNB6yD6p4bUNTH7lRL2T9p/+ZTig8mefXWALNpR7PKXRX2psT\nm2sa2zXwfXHbZ0RLa0Eqcqz9sJdI0Ke6ORv6i4wvGBIWxtvEfYEw96Nt2vEi\nwKCJ\r\n=DULO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCltaqsvJRRWcC/Gz/B/fHH05Q/F+P5FW5hML0iLXVLuAIhAIqu2D87wa9qx1ZN+BGwD2g5RwHINb0frOwDsIoCN5wB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.740ed33b.0_1610474588067_0.44844555000701747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.c5c541b1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EiUA+wtLY9jNQXdyPEhcoCgeLZMfN7vwnHihXH7tEz6qilD3WoTUVsCNwQ3S/H648pjMJb7OnlZ89zgXJ4IJ0A==","shasum":"bb774f6e8c0054281bbfa03728b2d61cf7d91dab","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.c5c541b1.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e4YCRA9TVsSAnZWagAANoIP/31WkjiD/WCEZblQBR+Y\nJqd742OD2DMCgDUtNWvEtEx3A1OREhSn5OQLx2BfJumYSOE32GY7FOLWtovA\nTTeS/I5o1TQwPjwubhbNR9CNAsVx/RrCMXTNw9Ar0rWa2ETd6v64itKJIUwS\nNJ+NLWHigOu/Y7nR/cd+GxmiBl8mINJ8kcKOAAlFaeG/vZY0M4ehHwji1aY4\n6448gIE8JtUmrAe4O2tb/ZHBFVa2PB4O/ndVIb5k3voH709w6xBshxGUs2rk\nTzoFi3u/0J/QiAsiJcKOXQlAhNBBgDOq1s4hyD33ejY/iwZw2E9XzieGp2bt\n2gL+2xJJ81xMioZsR6X2Fu7Fb7XUVtXhEpvgqBVF6nM2kPDYr+mnzPm2Vy5q\n3tZvIiHUymhOc9DwL77/HB6t6Qpw9dy9A7OnW1QxSx3bitZQqqo2MclhbKRZ\n009LR/zg0H/c70Gur03yqo6w2q1OKnOUTWZuKwhSUF7tEvpAKIcZb0y0xrjj\nG+YI/INB2RW9z01RKdb25hX8uES9mB90bKP7mtwRAxmbaa99PDUIX7CvIUdA\nBbuq4ioPDjzl6eiOw6qDQihH+Zr27HTNEzfYdH18NJ41rH4X2J/KsziDRv9s\nnGdC+1bavOou/trUl6LPCEOBgX9lLQZxRp8vlFSzhpf39P8E5FH0DDqNizjn\nOtAT\r\n=4VgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuqIB2sp2ONrdQ0vnjh/qm4JOazqrcLQ/puviZqRKScQIgBEtLgbtiVobEByja4TFwG+scwkL1N8eE7yvw+NN1mbY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.c5c541b1.0_1610477080425_0.6440783645596762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.06fe9d90.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-k9MlKJvNZsK/VER3Cgd9X/fSQHwmyDEAFF9JoJez9+8w44h3zgEDqnUlsDqQUDqJF82wEj5EUf2F35VrOVGELg==","shasum":"15bf09f73d07f9df78e76b16cda3b3a9652d8836","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.06fe9d90.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gxvCRA9TVsSAnZWagAA05EP/2B/XnDq2vTs4rqk1E8D\nbllBIICkyiwumE4TtlqzaS81NqB8EQ71zeOR47n+kXe9yLNNgO12jrQPcF6k\n0wF+9rXwqB+E9cnSbGq0FYJ/AKvE+hVW0XVAus8YLOqZ2236Vz39N9IijWYA\nHsmsDKluXFOMYtUkP/buw6V5c5dogjSP2QvlI0PZRea229Fzd/73HRnexuMw\nKKWxZ0BovF9gMrlzHqQwBc7RgnQZ6oS9xzrTnMNIFUm29vcE2D2WJos4vO34\nyRF0re0TgXWmxFYlRdKlIIb6cCTpRiW5MEb14FrWmtBTgYD0D62zqqJATIQb\nmpb/l4NqrIC1ch4rIJY5E1nHhUyFz8ZsCsS9JHHw869vE92HVbGlslaPN8Qh\nqcAJF0Q0M/usj/oWvb0Lt+7wHJfYrcRtCXaI9CYZIHYxyXyJeZd3vX10GB78\neJTY6AEEDosmsDLlX9uYzmnlYNNJAnL41lH/GnKpDAwl+7tr+ZxLT7zLxdJ8\nLCN8TcPsGojada/V60KsrIvl2Bpz0xQNMp3C7MvXOBh/Mkx7rXX/qGI2cUO7\nQuPQrYQeNbScTz8qsokSlyOQM/jhRxN7Feqsda98C7fugG/xy9HdG71LQzA0\nzaagFX/eJC6FwWagcurfoKQVYyA7gjhUWPAFL4H1A9lBHGZcbjjXMjwnfSAM\nszvp\r\n=Q3gK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuCH9GJxh9Z+C1FxnrhB/a2CibTuqVvoIjgcsJlpvo5AiBKAqdQSdscur1N1toRNNJWd3o3xW8uIJ6CKR9KQelmyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.06fe9d90.0_1610484846561_0.4591557818539922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.269eed01.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1oF8xVgbUqGSPBfnTd/Mgks66iW43NXikCL9M9+MepS9YcSedRLeo5nQW5RgmHcb2ESi3RY7g53Dp8YT4mfDVw==","shasum":"3294539d762997a156a2fcf6a20c75df0e271c92","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.269eed01.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2m+CRA9TVsSAnZWagAAb2AP/2ueoU6S9Z7vgx5ifS8m\nEtxznNSDilsvMrgtt5/Pjg5wbynMqEXBl6YJ7whJPXQv4fvK3Kf1cTGSPUna\nK+4y8de+KM0j9iqRSuMo4LrSD2LPjIIuNInH20caYozdrz87z4ApiKqR+hVs\n1TWsbH1q3YyMlQoDr861gCiCfBkmEyKssQjahx7nS3tAS3K0mYkoip7HcSr0\nEWX55qUNnG6UzlO+jIUUS8loi6HFKVrrhd7GA/SdtWX4iz7zxRwivGz/7yom\nxsTmVsFb/7OvIQLNXf6NL1kbUJLGpY3w1TRm6fwGkNW8me8bfUoFtrJ89Ch1\nxNblgeUvj00kZBFrim93jp4ZT/2nGeQr6wJUXF5iUQdEQ2vX0cERBWsO9fhz\nYLV70i7kkf6VSEt2sDyHRTtUppdE65CYjubuYQXN92uf2Gvnt/qE1/bL6i+f\nCF+Lilpu5MffXJz8UUakoqf3BI2cMKGNqlyeyiNhCoyrmxh04hSvjdItckrN\n1QRFq/3+2TdGoDHwIe6NcoUhBD1RRVFEK/sexMDeev7+mEejgiHXmA7MFWWC\nFyLrJXfJvCgfbfBJQJ4a+KV0maGBXMjZJuKl1B14Qz15/77S8+r3GCAHKGRN\nnox3YezEO/JFNCxV4f6A7kKoBD9+08eMbpy6ymg1CMIRNdx1X5uvwLym1bV7\nAjLM\r\n=cm/p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDONj5+i+10w6mH+FmmSRBxZfPwdB51sG6K8IboC1YTqgIhAM/onplo/jy2neVxKxENzUbcW61wCisRxq0LqAldx/ff"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.269eed01.0_1610574270222_0.5310799003697666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.8c075f35.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UOW0qkoo3MzPv9KCPswbSzPuGkGSIKR4TRUsplwFiJFM95MKsbTaUSsFA2jk8eJgpe6QodbEnHKxVryuav0cyw==","shasum":"edd28b50ad847e9c750e869cccdf49e510e26873","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.8c075f35.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/3zbCRA9TVsSAnZWagAATRoP/17ielClJVywhK9UEK37\nJP3FFSi6CHHH6x3BjQw1x3AtT3ANxxVoFjDexdjjZszLzmaP/uB8GfDQaXW9\nWjw9l3DGMiK05Eri/LivkGjGVrjINXvzb2gWzstJ4Tr06F4S+FYCL9qDLKk9\nW5CSeYryvCkkyPkQvSYlXCd0TrhozvLLI8gOpqNzxr6k2ka/5PYOf46X0ldW\n2cksKRHr6ovYgSva1wXy6B8t8bS361ZXScblKwhnVZOz2FWGhnp8Qoiei6s1\nJ0HbRdUTe9tXViVQXvO78+HYcuhcemOkE2Wn97EvvjeArxNNqCK1bnb4ghGS\nfqEsdDCdwtYTdawMaiqbi/rCoLJe7YllI4Gl+RG/iV0IrI1w9lBuuAZ/IWep\ntyAT0k9OeP6VuSAKYcpobtwDB54irc+b0R1nuvUa7rcYw5HufRjg35PJsTMA\nS5IVDtTc+nFm67x/n4ab2zwZAQZJrezYr1LRf6F0VfSAcT78iaHUSOChFaOq\nywKur/v/5qOPEFvkTJidDsUkCfTnoCQ/gWBJNJXRgTul59n+es6T7XlPdKXN\nGI+5x1Go9dTk0RR3m6AqShPTHOBlcnIW8uFyH2QI7BzcSy1VI7UNe7bsFr7l\nkuhie0YvdGjhXSFOnaD6DMhLaNOA6XyA4fYhaJWMrASK98eZawxXde6RRQPd\n32gJ\r\n=cVbB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8WRrSnWz8//E1SetOH2touLbQIfAoPpy239VEMf3uVQIgMUq6OY22Ta5R+awlyFVQm21r5Dqmi2bup41CGgcnVpY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.8c075f35.0_1610579163192_0.7606441395033356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.3cda381b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yK6QvuXSwfI3DYi8CWQ7WU24hR4MXkH6OuGGzK9QTVxQwug63yuPnReA5iXveV4iLhV/P4Okz7dKkSeAmOJRdA==","shasum":"a739685ecdf99cdcdb78e500bb61b6ef89bbf4eb","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.3cda381b.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4pgCRA9TVsSAnZWagAAvEAP/0qvGXVU9xN21TOXkHCT\n4bH4cwOqzT39eMvWHExzE1YgdDh5YtsOufhB/fjQWJbVD5gR7EQwteY1C1K1\nmTtm8qJGwoGyAcHrlum7GCkc2hj8ZcgNYxrbF07Q3CUD/JN1jILpOLNGAdFL\nU8gJRxEPSAa5u30kPkCn0sKbSN7gVs/58XVYmTQeT2kCwzG4YWKsj0dWAT5o\n+F71gIcnLvPgYbFBtHFuHUJmI5Z4/fpJDGamYFB5OUW/28mm3Gf/OCYNy0ZH\ndcx2MznidLM+t3REtlmj8bsH4Lb3MgxDeFOo3y0OsDsGANsQLmkoQa/817IN\nqwd4PWb+3h6JVxHqGXMsAXeBP2uNz6ZYPYnpqqWyoq9d0F+U/3wSk1mOprjI\ntRdwR2cVJoVmJ66bM+1upZWT9uOQ5+qobkTe/lRwuMENdXrF30Zly+y9uk/z\noFYAnPP13CeBLvFvE7KT2zp68UgQ3akWyQW4U1vyy+C7MSDjN741K96TdkHj\nQZmiqoTUT552rHGp2S3BJ4BuuEqlLqwzHITozPnE0gp33lxnSE+s+jMHwtdD\nvgavvC3Z4Qc8WHIVckt6eHVUJqbqsF+kaW15LR0XuLCY4fFwLXB47O0YJM8K\nrzVzk/FbdCHP7XdtZnRkFp7Nsy7UEcD+9nDXc6yXcFbOKyNPMtgTz0msHw/F\n1FTG\r\n=IXFI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt08R7QzidXBsmxz+HZ4WSh83Rv30LzVC9gEqosxzj4gIhAItufyhWct4GquVm6p0gIS12iI55h3yHljYOnZwErjfE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.3cda381b.0_1610582623970_0.33817410898733846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.bc113605.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-t+TG2lCYpZLB2sEXc/wDXnOt1bLGlrdbocrqcsggANQJEoJXeQ9XY1X8h52jhcL1s/TeQVrx6DTqAOKFlGIA/Q==","shasum":"ad30292879428a488ed9c14e82d4b582fd071e11","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.bc113605.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5PvCRA9TVsSAnZWagAA9eoP/35EQDEVRrLO5U/i5zZc\nmz29UfrchFIkXyMJYv7pQY5cXmaoSWtDxstCuIcBQGfi3eIwkN24j8pzodZH\nUYRXf1wQAW/tiNlu55Zi2mWU0OTJ1c+LY9O1V3bqYbr3Gz4NXFh7+j071Fgj\naZeaRLKCMKz9zFm9Rz9WsIX2hxsKD4+e9io2Wu7QZOs9VmOxwJCt6z9OyFkW\nDs1sOm2mun5OMO6FH2xKChx3ejJqtzEgZhpYe1spdx6b11XDPodXpAnD96iQ\nDZxH/jY5RY2CsHOVncDjGEEch9c9S9/h5Aa+xYvk5gsJshTxrrOyBZVSoCp4\nubWJQiJqp1AFbl8K2WSnBtQU4rKIoiV8U7LBti11xE6PQD2rNLGEZHYAXigz\nReBGm55tk4eAeq8qGIH9sNv/Se6YtHRIw4eg1jtXS2LsdpBBLY2V8tJZXBgS\nuthytXyII+eKa0IH0842VO9IZyV3M1QPI2ntRnNAsqejKHCcSbp7z+VL+wAS\n/OyWnsQgYRisFT3XDiplhVMj7TifEISzZGFK+KPxMdDJdHdgmFA5qVcbJGnM\ndkK6HFENAydu9+b337htb2Vg09qVqHIpPU6F6ewRnL3+eK1gthtdmHl0T9bb\niXNKM4BgWNteI0OH3b3yaurXh/jByevQyo45jwwQVxplpjCfVwezBD0xkaSY\nLUCY\r\n=xTe8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd0Df0haHnrbzY6yup/S2HspmG78jZyzv/nmWyYtRClgIgF5a9Abnnad7mlgksnkq5fHWDh5TGGQnOSk0Kqz53uSs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.bc113605.0_1610585070881_0.404128805801913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.0c1d6ff9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ucQJGaAv/oEgeKgUZMIMRlTyYaP5owLEhgN7l/iuZY8HOkx6STr2vj/WvxsvJLHSDE6PPgrsHzznfr56LCcF5w==","shasum":"4093879e78b9efcfa83f3d38240a634df0bdef1f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfY+CRA9TVsSAnZWagAAT3kP/RrWSs4pZw2l82ITKVUf\nYnQRkXX1ROSNkUUW082V2N9wgFpYJzlFXqP0LMbVFgIN3iJhnOX4xrslpDoR\n934bVA1nxAI6M4L6BUzrqRJMrn4WUp/TnZng+95ngNzbFeXChYMN+VC52X0t\nzfP57uLdl0FW4bp/4pXgcalNdpU/Ms0whGzXLCOpc3P6dwInnmieFf6syXyE\nkmGeuRtycA9e47D6xxF/tgmmWMGrZe3WuXvpS+BmXOWjCLer4UGtbCwiLPsE\nc0Q6RG8W/FusgI6kmyof4EdhfTwCH968q0f/11FPoq/WbEVX2hNe8PfZV0qX\nNoQRi/ndO6iO2Lxl21jjeX6f9Eb0JRw+/2BruYvnX8U1YNmGg3NSy4/7yYlo\n+lvtu0AHJGlDHWqRDB909HswwlXbvdDmWY2yLJg9Py+HqvefFdXfp475R4mt\nX2kegW6hQgKpApAnjgA2Z52Lf6t3Nroqp4LTLXA5Bp4nw8Uq1bsXRQROgftQ\nmwgc9xoUl1675Gr2/E+hYf78CTgiVWSrwGnPxbSGHfL11O78AS6/OZUEFl18\nraGLgKLwmvoEa/cWGwrjCBJVLiXx1SLluxboryzOQrgx2uk/uebu0s7Ab4T8\nfnCnutatxilF3V/0i6LGdcdkIGpe5F3e7zVgtPOk8ptSj0BVQm1e0Orfp9os\n4qI7\r\n=D/+j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElgp/8EETl0WWr17Bh2mQnto8wTiRyo82fyPf/4ohD9AiBTGPuI1nx+MPMWHkbLjHXeRcsn100GTnJbRrNgxsNRYA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.0c1d6ff9.0_1610741309558_0.12905476043153996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b4332e00.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-6jKUImXcZNLTpCZ5U/gapMcsd4ZjLUI/EtntrhCsbT1AS6Z9Eha+E+qkPeinbeeans7XDnMqYZCCpvzZ3Mt22Q==","shasum":"144ee57b4e5b08589a877b7c9a2bc54f779afdd7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b4332e00.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhH1CRA9TVsSAnZWagAApTAP/3aRPQnpRVqFw4Ix42Tb\nzsqSiYW7+oRUg+ife4NE4TcYbi6OCWeRS2RvibfBQmgecUGi3wiYRj8Q+H7u\nvhiLyXfMcJaIIZPO0W1mXIe8pSsKITS2W7qX7ZP/6zYfN0MrW6xPT1MHIcdv\n74YsEWimieUTMPej2Df44SgFdkfHFzGAz2lFvtMrURgWB+ntm+C5e0O1V5Si\nYzb3VYCurEM0Y94tTS5WIHSlEYGnfmXlpS/OG6UtkYNuSr+itmu1RcAwJV/D\nXY3PSM1GlDfk8mw+V11u02TBxdL3oy/xgus8QPu+8Wj+z+sPhY5sdax2bTxU\nJHD7O0iVntyy+6J4DhNd/s+s6TTujMvM76NB4YvKjkwPiER6swtoRD3T7OhM\noCV8FuY9d725Hsbhj0R65Lvdmw9P2A4gwdjyKLFGvLf+fUedt+4g2vTVXOjZ\nyRkofZUFIcEz8QqcKXAsYXpI1XAUKP7BtM3EGLVwXL382GiERpxGJt9V19cr\nx9djx57P5nsw6gJXlJy7NE496gCKviUOmeaidA1baup7oXQtY/EsZuqSsrvl\nuKsLOO20gStMiijBxJ3WwwuaWJFRjYbP6hdQt2CTqnfALK9exkpNNJW5M3Pb\nECi6JaidPe+W5Q1/c2U9y72ejcMF70yjBmCjIWmlK7duDp6EZDx1ni7c83fJ\nr/UK\r\n=jsAj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGYayvyXLoJQkR1i/YfsLu6qfjdzjCZKaQZuZIEigaWAiEAuWjlB8+A9emAKFtu3jORAwCveTPfWfyoqoFmyQdJ+go="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b4332e00.0_1610748404959_0.8465844654459451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.2899691d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-W5mFAy+WpgO84nQ96PTSBfUd6D8NcjTclAA0tOnHWZ+4mIPUdi77eGzu327tfS6GIoRThfAvWSf01Rg02MZQIw==","shasum":"1340d72ac1c3a229a384d73a11c8051caa817c63","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.2899691d.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkTUCRA9TVsSAnZWagAAJh8P/i//c/lqACwZ61HZ6F70\nwHWZk5MLJwim6v4V8E0ZPRcIYvAKsO20M7xQhoMyn8R3IEvJHeMMgkNiAn2e\nNuV4oH58+OGjAwTE+icqeaXplKUYimtqZ1uhezAVkKjfYOGOKF08ABVWMyJy\nfWsWoQrW4fTXBtyHxpW0aZFbF6TeRcNueGDAbiWOp2FJfuqtwgalkxzMEDw8\noMbfboK7J4cPXpv08Rm8oZWtdBA/3HImCkAvQ67DnzsdBttnq7uok5MO5DLZ\nC7WlRZzbt1a+vXTahjtQryZydPNFWZdYtv2RG8F5PetbzH5kmv4vTDtyWTQN\nEuLdrcKpoRf0szmapS+gRmIm6MZ67VxOasEGJQ8aLujhx3tapS55tj7gA1zY\n5EPS3aqcF31YUjLIiMgVYE5SU7LKRt1XyyaHGfSCetWAwPvQjQi8mWKQMC1+\nFgsn15f8o+/dDaWRNC95hTP5WQ1vR2dKAhz8lkdMiuIvdvrQS5o8ih4lDKX2\n7771abR/Fy6kb1AZrYOnjfA56AaeA7aUKu/UQOej4MvOaLFJKq551fr5zxJE\nfU/uuAeS2PLT5n9yjsjIx1g4jvF1cxF/JwYbWk1Tp3hl2iYEOPx4u21lM9lZ\nHkTg/AXM4PbIwD+8RgIlM6Tp1tbZNQXfUS3x4BkM2+wVsaidhU+yypnJ5K0p\n4Pns\r\n=UZdU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAkvt0oC3E8oThbLz8tU5HW9aYy1x9/qAio1MNPkObOAiEA4NCPQSg4gp43gEuca8oSQ3TryxNPHiJrff+cOjco0fQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.2899691d.0_1610761427665_0.21344131624249774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.fe73953b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-SZnxfKvevmB1H+tFB1WQvn3NqOmA1UJafoodTbCB7CebLcs7MlNqIz5ly+AkFzWg69DPpToeZ21YytgGs7EcVg==","shasum":"efabd4f7f02e3e78172c75bac0651dbde4fe99c2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.fe73953b.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEECRA9TVsSAnZWagAAFoYP/iZS69bh/tUvqC06wD2m\nQYCKOHtFJIBBKjd8kWOgr1jAxHlfRhk+KbG1bT6F33NZr6Iqacj2c7xsQGMx\nBaR8yWBw+FqGPHYvBsKQ9w7C2q90ZEJEFPN4Gg39qjZfPzo0eaKZq8pIdfvb\nE+el/VK1hapPBDxCI6tBCG5lbgz+LQzKduN305njrMoJCtHn+S8/zqVBADEo\nsY4YR88ePACbLQc3sVnLWawLEUPbhSviJjOQFS0lDV0Y0iJDw6fzZfsbYRh/\n7qLQ+Vdjr57w6zf1M2VMxKK/qXmXjbxFcWIpwFV0VBZIdhJSXcX56vChjbj5\nHmLMMmL4g2a7oo0l3P2ua7jnWjyqH+Kbwz31EYRDXCg6YN6MT57Y4PhbUa6M\nnzKrcGOSXdhIiAeKFTg3NAbWPOeiQ7tepxJak3niwg5vcUc/qKgvunAjEMCI\nyeJ5rjISGTuoME3rrvaxnE3sYpDoU6/4HPDbPphYJn6roPGY9un5/GU6ptK9\nEAN4+LDHIQRF9y+/PNRL3orovIYTZWWQmL2vY9ppB738PLzCSdzsoeAgbS7s\na2B6zNXLdn7nS6r4CvHI3N6Jv4vl3UvBcDDjIpdUVyFu0cabBrsAhFG1wGGO\nQ+E4OzPe27RfhNcmMbgXbJcBd7f2vfD9X7bS6vkhxXjYU5UhMuMUeaF3OsIv\nxUak\r\n=hOs4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAju7CU9Qwqk79y50+MGz9k3ztyydJHFKquw/nzxHhbmAiBmSl77hSa+FgQN6NDyGXCzIWT0JVOwUSLo3C7IsvzjIA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.fe73953b.0_1611084036097_0.5253470350734488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.d3a16455.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ON1QRf/E+tcKoyZkyXua/S3MxmH1CYiVzAc0QDrLZH2EFC9Nqr/Ir25q34PVIORxXICAi3OhND9so9x0yc8Weg==","shasum":"bcf560dbb33397113af284612ee93823c52050ab","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.d3a16455.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhACRA9TVsSAnZWagAAgJwQAJpr4FuoZFCZoixZhSTU\n/FQem/nJ4KlDQol6FxWDP4tBNY7Uy8iRg2WLTyDcmIMEZa5+pSE5XJqnECIB\nVfp1MNiK8FuC4d0uS3fXqLKrVrRV7/xMAhbDlKHxx8kw3pKR0cRQNLXxL1Ez\n1gNS5L4A2QoL4jSsxtBG8Tv6oWIssNfrX70slkmiNJ1mo5Q7pxXen3OOVahr\n2dbENc50qRfNjbpyviYBlXeBSIhYgd7hOPBIlCttdlD0I7w6OzYPfsxxpPa9\nXDr48hvFQIn/LJ6TN+tJCs8a4J3n2K6s6zNza2dCf9FEMBuo1WqH8XtMxkjj\nbZC69pQ+1g5tU/QsJ1yEZxpKi47QpMzkAtJ68Jqm2JFtr18H3ALmnHjJzQs2\nalddEM6vr3xj9l5d0Dtsa+kH+p/82Qvpnz9bGEUD8y3+nCQuJdj9zCzrS/JK\nvOjeJUvo2nfoGCAu2ksA9wv3HnjbqfzZMRVX9wUcUJ9ikmVM+8woQlOeRp34\nvUoJEkli9eA+3EuYhTprZTPZ/6OpOdK0lPZHl/yM2kgqLgMKOnOImJKJRTh3\nmESV+T6ujKZUwcc4UgUQgE9u9+HWgQnoZT9e0ryRL7IfE/t1g65L2tIAdJce\nXri2k2q4cvzOB1+biuSN+Y885N+i7eyJYBg/bFvDy0nCKYkhOBnGk2PUXad+\njH2s\r\n=FdWf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGDwSlNnAsuhzZDU/cr1fztgkn7PQqxEZdOwk5BgFkugIgFxjzcfc7ompBD3S/mauTC3j5vPkX157GpucKKTv0a6s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.d3a16455.0_1611085887883_0.19934227308789332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.597ca1b6.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RpPVPOctS+EFD3V8XtxOguNo6JVOy0i/9EoDHreL7t9JEs+1RTO3h+7uSqWWxyEXmRWc2jvXHrK8hqJsIai05A==","shasum":"f94e438a2cdd09060685ef9f35376105a570e52d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.597ca1b6.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4BaCRA9TVsSAnZWagAAMLgQAIgVlTPl65jRa6oxxA96\nLyWLubpQ2JOXRVZ1uZ5PooLawnRtgZhGagQAN0S2vA3Z5sIXYFqRO+5cV94t\ni+IpTtNbzquJZy3AzsuSTktI8JswXoWFPLcV0WCXKpNAE/lwCITjUeGXe/jc\n3iH9fuXHZHzIwB0DJqSkOlbR3RUlioQD7gRXdLEzcSxsvCaEVqzpbUbcKOsD\nxPDmPXygqkS7q2vkSTLyUzE2BwkeSCEFwb6XI67t8vUVLfBzYKzQUUQ1P/Ex\nDwTpAKe3NoPUGoq8/WijWJX6beAKzdtn7tNeYOuGfw2dqGZoAaxHtWVbtdM+\nlxVO/wqJnlkakMD0oVh64F1zKiLQ1l8yRfQTczgJ9Jy8AuzrFY+yzdLrSQRy\nutN+GMAtBw75HELaGxwnLcvs3LsB3XDiee0X/LTVCNfw8Y/W1Zagby1+JhPQ\nW5XE0hxL6yz9Wm8A/wrt+FYMvGQNuBawWWiHOMPuyktiPI75RIUb5mOplnoh\nPgwSOBXAJzUu+jfSnMAo8L7CXbrLVZGLFJ+GENcGuB3V6ydmu/VpIWewRWRi\nq7qffQ/NGoselkPH58u/GfeUtRO4DkNc4+vQDndO00x9fG/wWalGBYgNRFJ2\nv1LEYxVclbE9x1V2f0/AsPOZmLSs62LeBFUxizWAvTSGArTVd/+g/svshjjp\ndRQp\r\n=EPZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPkxUCp//TRXFJphUKOVqY6XrqAvgrNwAqjqY1B8JGZgIgHZcq1aExUK10w9GHbNV8jbWhwkV/EDHBJ6swkPFQJvA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.597ca1b6.0_1611104345702_0.04561529042688295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.3c195efe.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-kYQT74EwmOguN+TZMbpKBXrMUIr3OB2wZr/mD1geQmilRQsg6Fg2AUB4Lj0FRDQsKnKlx35ZbxHZ+usfU2K3mw==","shasum":"c81cdca93bb8172bb33446afff19c3c2c16bf289","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.3c195efe.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47LCRA9TVsSAnZWagAAJF0QAKOeGLWM0MAedFhtx9Wc\nH+shMTGEc+iHnxWyHHuCL1bGCaMc/bG2Nm7sLglw8uGenneH1ZKRTnAw7QbR\nTQCJzepPZb7xNol6BtVIFu7wUBbTEp2Wo97/qwQlyaLylXafIuSfCr3GN3RH\nwmioiV0/LE68PXczLdkfCvxVmmeELrOkebljJV30xY0mh30sA+MW24rZxWK0\nQxtxZ5Pp0VxxvPk4mT6jqFY27YfRzbZH3BpmwtNA3nSDN1E2Dlw1iNroI9uj\nhgSyf7YvMp5P7hkaN1vDKgM0ryeKAsj3bVisJFaVgbHg+fpsmoQuswnJNvKa\np31xJBYQpnBUYlgdWKRxelPZDIm6evT+szvPpyGV2EsraGM1fxSMRRZaR72G\nM34xmWlZdefI6nt9e2ZpSqqfaRrF46TB38biG60FOCAMczcKq2rRlFTynuYp\nD4cxDKQx4zemD8YFk6nZ9kHeh959aLyTskgQs2Q7t2CyMtrB4uKk7RuvUA/u\n7rfzx6ofLb2bO0/PLB+CmaubsfEF8daEdRoXp7uj+OlrZYH1gBKql+JRRqHU\n6w+fUFnJZ/ed8yj+QIDVpqWs7dXbsvH7mWDd+tyYYBUA51VmF+Kf5s03tnZt\nxtRP2vwu2B99FtejSyc7dmPWWadzFz53YVme/0jewlx4S4/cavQx8PrmowWQ\nHEhf\r\n=rIQ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC14dVe0npnCnuS11yV6UBdi1jFgJ5/omJ8HO4c5j6bOgIgHuUpiEqBlcQOJKQXF6RbFV5hgxVKNsUfO6n09PfqzDs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.3c195efe.0_1611108043051_0.7175278187550218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.f7b8755f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.0c95c9f7b.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-e4OMD/DkfpvOnKPLnI91OqPVWqZ3oRd6WYOYldNsHRsdC1NiwO/1xRlzkxrcOT+mKzRnEKx9NGjmmpw+dBptSw==","shasum":"00c5a0d84372eebc65d7f9306753587591670761","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.f7b8755f.0.tgz","fileCount":16,"unpackedSize":495229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJRjCRA9TVsSAnZWagAAv0IQAIP+lfVgeG8gqyqwjj+e\nBIaJE1nRO2pMd+5JwgTVe6QgbNNlTRPeAMrDsnOneF3Dp9XrYw4d/ItjnB14\no7zy2wddocBSIo8YA1vEui7MhU8rUYFeCgK3VllKPxfQ69Qazqs01SEQNmlz\noh09Yp/uOicMACCK0dMhP3krfuiQNy6Ij4vKo0j1wSP74Kjxnu04SPZxoeJg\nLDjZvI8/ZpEou7JrBVxtDmBMGhYalkmQ8iOf1ffxvQ6zDAhta5FwKBEc8m3v\nSS6ONKzYD6w+PDFJkfLxdRwt/mcJi4ORJHYpHL5DfGqlzHX/AUjIFjKr6fek\nqo2gNA5nrlmq617c9qsgg1iS9wfF9kkuWy/dECpGfj7oU+GiiY3dbQxDTpyb\nNn9hpqTquwdUNqLS/y4c4q66lai3bzofEKBvT/frqdeqhqFEPes3AH2Jp3ao\nDnn2IFtt+7otORHui3eMdTR3NqsjOF7v1ExsVfeMn5PXpZV5pGUQUn/+EMIV\nBchBE9QVtrD5D75HhcB7ddLnYrleFHwxl79NZ5QkaMS6oyjT7Mj+/3Hcbin+\nAuoZvgiEVcF0kQ7CYgxYWNz3OiBBMoN7XBWBewZXyym6Z+hBIbOFklfp0Nkp\nm6RgzmEkQHu0ATlbPM00JDRPyNSI8YlHJ1ItEJysEpw6SJAg6maY2MRyjn99\nSG4q\r\n=EscG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+PsY7LCnODIJcScXyUkyM0dGdLn17eNQ3dcoXdUAyggIhAOeIXAe9AHBTcEQ/ZhKX45xYEC7OwUJoAZJJxk5U+Ed+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.f7b8755f.0_1611175010746_0.17870336095011585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.f60de7df.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FXzL8VJB7UbdlHibUsscz5TqzHYXS2570sBsH9zR3UkFSjFDVXmWh5Ecm6z7EG35T2549E0cUHrTPIKjJUVGTA==","shasum":"b66e9de0f1e49ced522fe7415fa2b4b6d9aa26ff","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.f60de7df.0.tgz","fileCount":16,"unpackedSize":494311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL5cCRA9TVsSAnZWagAAfUwP/RERRRy1oSaStiaJMeX+\noFOdVd3eTmobWqQ2PH/ui21tNEM0weNT2+Jjkv6WW70I3ljrJIaa/Ed5Q4/e\njfch8luo4aeCxMXNshWGD0mwbwtgkEYhtyAEyJs+ZMEPsqZB1ZzXXlCvLG2b\nrerq0IhyMHOIu2y0klrgrZd+Su0b9c/uwoQ509DkBIZ6bxayaBmv06Dlvf01\nWMFddlsYoYZebG2cWzMJy1uFBcgNwTK6BPJX6QzqJLVTD1Y3ByxIEuN+Ejgl\nQggEqUI9gnCmpPUIxiaxhNdlqA1R0KYFZrv1ggEg9mHOdtht8JJ2rL/p+FVV\nTY+SsQaZAg3R+VDFHbzJN1A1R1ETqEstJGiejd8YTqDyZiFWk+zcxyTbkerM\nH476WPuMIGJcbVOQbDqZi9WkfJT4ecIiDAKxMcSOOfuUxyE9UiBbiolvmK7Z\nk23p89L4qatg21TEoyq1+IVya//h3w4D+GXUgmojQ2tHq7o6XbPcc1nbIRrz\ne64LJW+zxFE49BcrmI2y9zORgdeOdxGat8SG/G7UnLu5zclLrkKarqisA206\nb6zCrIBCu2QHyl++0OTLSsGxeE1Ya2yKZLPdVvqAB6kz+y0560Os2BCkL9nu\nGoADNNxcgyWltsTB3mmwCFqpU69/wauaFtxkjG4VkrFlbnrHi0e5DUM3/8m5\nZ+kG\r\n=sjED\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsMW/zUZjlmE0yjZz1Z8/nFqz4ULrnsrb/Yovvqglk7AiB4tkxxAOGRxj20ynRzswcwwXOL1pLj68CYApqSxa8njQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.f60de7df.0_1611185755976_0.8623276803714173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.664a2927.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vrzW3UiNN5GSnZUB05CjDRTZh7crShRG+AO+N4tn2rIH8RoulsBrifOIZPHT/+pNAMzXn7GKH7VKJYqOHGW+Rg==","shasum":"0d7304db3f32b86f9fb45bc52ba0881cb3eb463f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.664a2927.0.tgz","fileCount":16,"unpackedSize":494311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdNeCRA9TVsSAnZWagAAaTEQAIXze56oKxN+/reUMYNp\n2Fc9GpsIxbUJjn0QnfQmLiKmzPOIlzhffs9vJkTf/VPhzfupV9rrgYRebhEf\nHjd2VjD19VAHfHia1MKWD55S1EAZ0BUHhzt8Vu/l/ohOOxdBfRC/4k42RoMo\n/yYohHFybSYml6sP35l1uRDwMFzlSkHPc5DQJozTqxkNhDjomle9t2GZWasZ\nkePMGSMLxHtAmfCT8LevmuK76VFHm8mFG2InBYqBKe2W45w7jM056DCOgQ6w\nuEabwuf2h0pq+6SP2rA31+VS4l3UQTs787wzv6RnI4MdRrJBYJtLM+C8Yi9B\n8GJpN+qcbH4B1sgcE3M0gk5Tb7c4Fm7MH5NnxZyReyzdDz/6JNf+Y/+8B57a\n6axIQ62Tzjeuzcy4e6YUlnGfYdnATNiJRenJJOoW9x5WLLGCCnhLsikRZHYC\n5fRGSVT8WZtIJxiJy8CUUOhhwfEeSVuD629LGpjtwMAfN6g1e7ucmPKJfIOS\njpPEEKPZcC69I5A3bskbFXRP7n80/eVIdjb0YnJoNbrqvOaaDmN++ptCVT0Z\nDvbMKvrUO4Q0jbhBvvdMsjXBqIbi2nFTqcyCKXhA+tlzY9JVwZbi6VhyUMpd\nVTWvT8Bgqa3O6KF9eLk3ySTwuuSP/SqdXAi3UXxgDf/TB9rjBpx99gi+xP+W\nNwqa\r\n=zo/m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUZrI5uPjxBItgWR8yzPF5T/86UzN8X5HZRUR3rAeEeQIgECLFjC9FvEL+x2DPoj/FP6nx8+GqO64HQQd+UOaxUoI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.664a2927.0_1611256669378_0.31873497065545564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.a6d312e5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.fd61b0476.0","@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tHzlwUCHPrIsFR/TRk1ygefOt25d+HRT15eyCy42eL76TXZKgbYSSMxg9JQlwvzV5eK8NFf2ow5lTQ4x1EXXhQ==","shasum":"345a00a9837c4f4a6a2eccbd375322a60304fed2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.a6d312e5.0.tgz","fileCount":16,"unpackedSize":494311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZBCRA9TVsSAnZWagAAWvQP/3/dCCTGOXX/c8YOQGtH\n9WwPYpzptRge9ctvy6UjpOnxucOlT3fz1cwOKMWk+CKRKTKwoYDMOY92Iqwq\nsWjlrE/h8oEWdZmPG5lLHvCixMad9VjknVBVE4ZF228wuwJ3mMsRGOWaXaZC\nW9lukNVqn3ukRVP+2psTZ0mr4z39ALPuLTPEGSQq8wZ2caWlzj7ZE1Fp+zvs\nZ+jyW8iwiHPO6UyFDwomafh90M4B3hqy+/eDUDVs8+wF/GhQrTyNgQ2z6dD3\ncIrrjUtnn85SA/RZopaQDMu6tqHxSt0fq/uUmLw/YU94pYIEEeYfVFIs6wmu\nAdKMiJ4peBhGiMUUvmVhoegfug3Au8KfpdI5Hl2Pqt/+DlI3uAhTOENxVaIW\nO76O/9gCEHQqOvoPpo1elSTTKlFcHynO8QyOV748rtszZuleGMFHBnWCvp4M\naTGGhUMmMmsKC0hdAvNzD+SdGHXO66zPE29JBLBghcRxb2X7pxLWh9EMnUFt\nR5y0rGETCsqjC1cPrEyYrDNO28xgyuAnygOk/5c/E2POQDYxKFG7Cjnqszza\nZDV78tBL664FvlZPlSbbCn/mgh377Ik7MejjX3qhpvvjP0s36hjdl8JfMUoQ\nM4B+rcqtELWwvwvbUjcp3AX6NENEWFybx9H7G4w3v5MNBsGm0KBzBGezEHqP\n+CWp\r\n=stA/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWmT4dcQZdeod2MnmKn1Jfj3c99kwAXmtJgYpGCGDH6AiEA3FES2wKxydjAzo/ln0/tvzIDM1XFf93annCkVRgBdSs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.a6d312e5.0_1611265601292_0.2943261206204073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.027365eb.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mOFAgN6fKPP+LaguNZkIIzOYRgLnQmPJ5jJQcGZ+zVlMnx4jOd2iK96S3mUQxn5ZtfvI1Fml0uln68xBX0iDyQ==","shasum":"5e0755588379c50a39d7494a921047715ebf2c7d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.027365eb.0.tgz","fileCount":16,"unpackedSize":494311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz5hCRA9TVsSAnZWagAAgS0P/jbyx9gA+RFV5GHGsB+e\n3WXNMIkAoTaOiOSSpc17HF9s01xfc+8x6AClj4wuJEpqwT6CfNZYhLFADp2H\n2+Rvpb5r2fZBjLfJ9VFV0f6NRivtYJsjDQPbdHXeyYN6h+exO42QUXB2h3HO\nxJ9ug/+umWzaqYz8XeLnwBeLeISFm7vtH2f4IV/HBlD3D+I5wH31TuR9/hIw\nQEXk3QtAyrO7eoMyM7JgXkm7oT9SgAyMALN6vnq2tNdMeOUzotvHkg90c1gS\nkvE8l+E5DF+XiiKa2wxIhlk1qNX9sESbxpzY5Q7ngZoTcsCBRsXOUpypLY8s\ndu5TP0maKuN/FrDS9QZKcDyPl7cjBWxBhCWxMz64aVQ+umSvVF53nrXsbahi\nTS5OO6oNi18RhB3nJ/YcUEldZoRx6QEw5ypLqcb8T94uzSL320kkiLDfw0Tt\nMpjJDOfUNLCeQQQqqGbZEureV463iwCDPMPpDUcZFHeNTPxS/j2JRhSJ+95c\nI8ZC58sD/0zvoAjyV1l9kyfpc35c4nev7xeWkhLxZBQSFgwCaFIvrEk0RBS+\nxpNyDqIB1xdBPIcDFwlgP9F0vwl+cugGJGyEMcjCvbPfwwXAQ+hTDE1vLtpm\nA5NiaBwof5L6NZANcSO92qAo0FWFCD4s+HbqSHyqYkysCt8S2nk96TVEMuGb\ndYc3\r\n=x6j5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsoPUTlcniEr69wRxR4XeXpy34EmStZUZYufAJp7L2iQIhAPAKFd2Zx6lJUqEAMtL2awrxg4GxArxoTE2Zl5OxOIs3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.027365eb.0_1611349601324_0.8534773013248984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.7e72b66d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-A0XE/ZzpWOnyKMDlYQtiJ3wY7wWdPC6yKSIOkt4qxx96+1ERot/kjTaR0j3ezs2cYvxzmrY/LXaSFHqyDbhwCw==","shasum":"cbf20230474f6c020eae1c4ba9c10ab540001157","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.7e72b66d.0.tgz","fileCount":16,"unpackedSize":494311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC171CRA9TVsSAnZWagAAU14P/1n9aPtps8htwpIM91/J\nna4PqWn5E5tzR8YXvU3moRoJE7ruPvP4UgSnldNn73JT0pOKp48lPyPR5erS\nES4Al+9Wsxp975OQuedhGltWvOqcymGJfZDs0Fg4lcBad7vDIpZaq+ELm4tM\nxRku6rOAnZ+gDHTThJ7ghswYur1+58kmDAh2QqqJB6blKmflpsrQmM/D36bu\nbcekEfByX9ivTwme9aVLxLotpglk1adgq0vs0kTW24xo91BUnclH+KBp5x91\na7k/nUZWR4rccwb1y8kSyJ4iavXCAr7jXUs1OblR4FWXhfCIHip2mG4ZsQCA\ntnYa+XQcoAp/ruDtoe6V1fMtKUTd5fIDny4ikRJgX+2GzpJqlIMppFpAKFs6\nu/5D5KpZOCkbvG695mts3q/IV+g6Ma74aTTRtzG0z1XWAlKPORW/oyxPROwW\ndLpoPA4BOzrkngCpI+lXPyV/VFddM6b8odOnAfVNIerQ2mZwH2OJa5hrse+u\nlom9aFyxi6S35ScvZkmLmYadZvHRhfLNsB9B1zYj2QdOqqOJgTgoylVDPjXZ\nHR1PVkf2bUcjBctrm+wwnt7k1l41b72aSrxKUqBlA+B22U4P4KmimBFRFIQ2\nwNRViCt15uUCrqdVpDRrLguvPxOW0itp6ogJE8bRDlN2twItkT4EEQclxK6h\nFoW1\r\n=EOl5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICA3hgjmAsNqxvdwEoIjgfB5LK3WTKKD6Vkl+pnL6jVqAiBspkTDqCvRMK7Dc6fXpA0v+LMVqlUZXOv2jIuislciTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.7e72b66d.0_1611357941100_0.30442308935348805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.a6d6a1e7.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rV2a36UBZvQthR1cKb4MbFo+bh12xRloUASyds44ZPgYIv1V6GlX1Bm0QSSw6Zn0WsYjas9GaHRzKt1SKX7rsA==","shasum":"c6334ef0c81aaae304c9cb9f65b87f1e6a04cc6c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":16,"unpackedSize":494311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2B0CRA9TVsSAnZWagAARQAP/3b2XHeOjhgfvIlsGaC2\nmvAQUnNupwba6+LSlZE+0SJvxBLecWM91vpIwmaJxJklFEPIHLVX7yj1cl1e\nycC/+ZHmrnn6glwLwjxPPNwjYsX00LrvH6gAYBJNzsiYaFP7POF7qXb42Vi5\nmArr6rjHoHYE3wHtajm0EYYhTx6Yced8N411DiAeNN+PVGhcdznzrL5wjv7e\nIhoiZlrDiCiYSe5LqmlN6j+thgsOZboBdk9TgrsR5snUPH/ggenAUDgjlvrS\nqF20ryeAJ7WV4bOEi7+lPDMmrF1F53SdMgB4SSLEVBaLXO3fkGPqeEyTKKmZ\nT+7wqdZG035VxBfaBL9D7QmfUXdAuQlrPP5Xre+KBwz2hfuX+outxGsbAy1a\nCD6WwLG7Nb4j35nIbZnTj9urGiGBFi0Aimi+mDaDz3VppIn7QmCFwZp58wEf\n3BggtcCl4i9XHkvtq2cyksymtjf8Ta5v8R0pO34qF+DY7tBz7Cl5v6ZCxa/R\nT1CTJHyJnWwm04VnqZR0fS6Oz7dwraS7xNLIs7878fQicQMmFXQfPi9XU7qD\n0plBGixBdkEaj7vSzFPW610GeA63F/kAiHPM23JJfvKpsDPR/n1ag9LGyj41\nuVfrflJpAn+AF/OWt4rWUmYVMmUJ3lIsvoOSA51JLbtCvBQFeN/kjpuQDl/i\ndV23\r\n=BCHy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLt1Fg7zvtfZ0WrdcvhY52T97R02Rdoqj7WPswDN7GdAiEAk8RH7t8XgAx4cu0wA2lKjbOU8ZAOX5I0/+dVTQgworw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.a6d6a1e7.0_1611358323663_0.36767938022046365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b95fe100.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wrnKYbW7qT/dOKhTaggVD9OdG5SKbnXVpWoGZjL50x8nOd1gWpSkOAPXoPxPiuIgZfbP00cARbbaaKKD9SdrVw==","shasum":"a706d01c57b91a4f4670b7349c66bf5a0a9b4505","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b95fe100.0.tgz","fileCount":16,"unpackedSize":411570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2TuCRA9TVsSAnZWagAARtgP/1XcWfblyxdRW0mWKe16\nYUCONIpi/9bn7uVmcCSY6IPp2UY0eBkC42c6oAql1EQwUXitCxVT4cJ62DZA\n3TTcnJFQG8VTp7YyrILgr5pS9ZcVItNJdkGILwyRFjoY0VPZMttJs0thJf18\nDi7Nfq+/p8867RZO5Ob4FXO0gq1sPGVm3q1cevQ5DHgKSw3QorGG+isT3x4l\nDmI0/da3oR3NbNl7D/2Bpg2uRjHODTLAbk3MCX+EzEXRkbBs9zTtedoeK7//\naJCebCOJXKcFYtvJNQoh9StHZO2899j6TI2icPa0IC+h7AnSYury6Y26tyyX\nCt08nT2vgaiQQWeZyJkgrrjgh+39IbRWsoQx96OCisBybGlkZIJabDKSIYnQ\nP55Rx9xC9Nkj4x08ljQz/1HUEwx2QTPe9frB8H5Wtz7Rtkld8aIgUwBaD2LV\n8Fu48oVg024JmIfCwCgA9MeDNqN0MwFl82SaiJIefAt+0j7KvnZn3U38/Owy\nIBhFvdjOhs69Z+42dS8meh5a9/0AaPjUysCxwYd3+mJmgnhWl7V+zlkOfRjf\nrpgt4etIt2kuc0k1nC3nnmlDNyhMUBzb98OZwMR464guXjsYHSJUhTDwOvTJ\nU6vdId6mtUakhNtsWmNdNsQa6zLZ4/Zyb6YBC+Vv7I/zhEeMR10t2iaW9Mne\n4xxc\r\n=rf09\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpMKx/Lgu0IjMt4lp3pKtcv9uLLzsPX9+GjPS+5djk/QIgF865aD/+USKScnQcMjbUiV6k5scsg3IHAnMD5DBbU/g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b95fe100.0_1611359469683_0.11908645445690502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.c8797192.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vayJDYUC2BXgW2O+r9rq80KytdXFV90mi8FCaY/8kDD0FG6fq+Z8UCzjOSrCeWIyfdtxjmRltgeatNsoNpUGzA==","shasum":"766aed2c1fca910ef842b389edb1764d2397694b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.c8797192.0.tgz","fileCount":16,"unpackedSize":411570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2iJCRA9TVsSAnZWagAARj4P/0tZs5g2zZt8GMyGewXo\nxsowo6QDCJChhv0TsWmTnrj1zYEJBWbyZqpQdcVl2/hUI38eedk1JRV+H9HN\n0DpbilTDQNbdXc1Sk14A0u9OoJyPzMFXM72lzVxG4HR35t+4MXUPrHxFaLEG\nmTYOXGZ5X50c+3TA+HOCmzCz/ZhY99QGLgkD1lDmFXPEtJNwY5eDmv8m8Li9\nWqOCPI18q7CMHBodxnRiOYb89jIpgnVtIEfkgy0qC4XGO8dRRxo+EpGU9J1W\nbV3403ejYAUMIYFUXjtsJuYlu81op9pFCP7JtftIk63MumCU9Wm0l2KTH7D/\nvUomoF0efAESk2O09uNo/YsDGcA3cQD4fK2uRcJ9jgH9PNY/SLjHDVLO2zvu\nD92S26dn326QbE+/YQSsAoVZai9fntR60F4g5hDDhvXVyXXHfJcZ1kXT6ByR\nbGJFOY3YcigHCVthHmZZY16V4rEIeSPHqQV4lQpvQbN5NUhfEooMlZO/Zge7\nOnp+UUhnz7FHtiUt5olvfU+/EwKWvTYFl35a4Kk30DAh3aWpitABA3FAF8XK\nq+Q2T9g4VxZUVPqSUVFMaDQEUDNQBiLHPBzSQ1d7tqPW08zk1c4jHi7ZpNbj\nLoEOga2BQTdA9VRoY5pA82SDRIMieg8OIRxjHuPlZIHjQywv+WcknxGZBkda\n1V94\r\n=N9pe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1Rbg5jnFizdbg2k2HvTjMfbVjnSYrP4PoVQPcDE+VSAiBE/nFgZYkpVP+/7B8xdX5imjhyGV2SSv1PAESBZcBGXw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.c8797192.0_1611360392925_0.4214825501010129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.946f5563.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-PJLkv66uqQkPi8Z4SRnUklMaMZyU2zrESumQVd6513NZiWbpBfui4ULXUCrN/UiU6g2MF+tBBtsxqaQu2duMDA==","shasum":"9f61c11e7beb719c3993f51aa3a2cbb1db0da47a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.946f5563.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3D/CRA9TVsSAnZWagAAzMUQAIn+ZjKjd4NGg9evvWrN\nNqKtWHm5cUszDDnXwhFaZ0Wlki67zaJ2GzFS8H/kX27/JAYOJevqfpHnSQgF\nanEB8yLYE6fZCS+9W7wPsgGI3Qza6foKaymi9r5DFrQfO7BX9cXHmfwNkegm\neSOCFi9enuV9OwW4bugm/nYJpbp2A7WV6XYBkUVwrerzDOh4WJ1cDUu435bR\n1Oh5ctVu+F0iIhKlj/pKqaZOUH+GU9BaArIOOzMXevquC/KrTgpI/9vl83pc\n+T0LPVcN95D0m8C5Z9RE3KiusLygskUd6OB654Lmyou6b3ie1YSH1zyBc1qy\nk3ObYckYxbXPdl1lsBFZ+ps8gAaIrmwF2nqMKnHtuO7kJ9DJO/DSV6frH5Yg\n/0RaVmJXMJdcSoXMWCyGiqm9OcNzf0A4SAkmZ099sphpKZjruGcNjXm237yW\nXwpC9Iz7suuyicUTmqIy0MBOanZLepgywcT+jwJsZXwv3mUniIozSxdFPiMk\npWi+mM5ZbGLheeInjbHDF7EeDPrFV+dmTEb8Ceh5NwRaUbUhbLoJFB104hzp\nWzWstx0G5mkvgDbKk1nzgXqmyLBW9d2iFBwMOFreOVpm82noPLg65nblManS\nWnQ6YRw+v3laCyrYAbRGWm+Qrutqi/phR5pBRbS0liO79G0h/h82kcBc7wnp\nXO2h\r\n=zKa2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7UiYQ0HhoSTwVRFcCbZTPqcvSRIIm/64m0qvM6Ssx6QIgE5DWBNfS3PJMqfasd43ysBuSH2avbuS8yqbkN3SeKGY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.946f5563.0_1611362558939_0.24092007799056647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.43664f0e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jzv9zBk8mftZMEcKyN+UZhoShSFvqR5BgMIvJx9AOswhQZqHkwegCpNYruL5G6d7hec9Z3hzDPzKZmtRuQ8lmw==","shasum":"a2b5b79b1de50e71449c3aff1bb43d5dba957ff1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.43664f0e.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0iSCRA9TVsSAnZWagAAb/IP/0YGQlC3SeWJOpkoZrt2\nDKy5hYwPyDLjjbUpx5BDPin9x7DuOg9Qlu9sIcwLH4cBn5FNLWT+asCezoyc\n0fcxMo5ZQuYTVgnK31mNQxF4qu6LGtf/JRCz2jeN6A9liSPmSAMuQZ/HD4+G\nURM2POijHkrbXnV8cvhPK1aqCGbcDgKnmC8qhdRVa2O7NITTulqi+X240Xcc\n4q1tW0+hrB9LccQpKAnnw8GheaLyeEmayeT/XNvhsKzz9hK5pgI09kU5mDGf\nBSRhT8kJ8WShB9bU5uEj16sZPvAgbW+1pZWvZYg2NK82O45Uwt7STrDf4VRs\ny99dM3FuF9r0jP6CeshN7+i0qDUwWexoZXl3htypoC9dML6YYWo89RmmMGfX\nl0FnhT0eEoiViXnU/IyhOMeWs7ENkrhkKrKME1A9R6asPR8bNFm+GhvzHvbQ\nQm4k0ID3HWBbUgd1QdooiQdTROYcv5PCHor83z4gEl93TCRFnk28m73ZQv0k\n5dnRzmSw8ZTwv2k4Qy/EKdeQ+3u8RTMoGcya44LcxtLsfDeOwkceovMHB39h\nW5l/aZ6pySMT2bcsjI70GMzHT3yMWaFOkv1f/nMxezZe1xuX3U9xwDAuyTUi\nFbhZhacW6i0qOSececSUxuWYCLbquMXOQ7oUZuw15QMinrkNVEaA3UEKZVG9\n+as/\r\n=+G+x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7SV5OoM+r0uF4qJoxCE40kptddEDlEy1O0FHrUFdfRAIhAIz6wmiRRg+xWLdWKZW4fs4fy4buqM8uZhdVjfEqJG6F"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.43664f0e.0_1611614354052_0.48909069768318125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.2e769e3c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Bwg6Y+AIvwqU+6nbU7CT1FRNlb2wzs5h1e8CZsfgYaepHC5H1F5S+AE5REt3jSkNYok3gpItEPLCmtxBkq0/vg==","shasum":"24927a092a96129104946d32ea22e297f9e6260e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.2e769e3c.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zLCRA9TVsSAnZWagAAK0AP/0gonlx0JxyAidAX+Zsm\nXEXcVnOM4FHl5O5Zryml038rtlPStd0+diHG74sDSiwPV0tBFd57qBWcz2lh\n5JBbgi/S8NHQSrqOsqkKxeXXhNqk02y7BWqiH6x+ufu8RgKfZk8cB2QxTN3Z\nZXJHB9utToccI6jiMjN+XkcPFtYJHyVhbZiUULxt3+HgsVFVDtHwxX72yBKV\nZX98aNC5KtAB3vG3vwqK2H8iVO8ynevyCvwJ38b/q6aQ+zWWff/fzoPGuL11\nj2lwxP9uDrPT3/HacYBOabpp+WSAQqlUUWGMrGoHCSZhAFOomxbzYtrxa2zC\nzs9vb5LpzLlWaoChuzA0aogNrPXe5IssdIA8LssE9bEj0i6fX2bWePj9tI+Y\nvyER3U8vn/1CCnI0tAdZnKXx8ICIJMRFT2WCkOaws07BDXozb5O3wrEGckGa\n/M+EpkaxhQxY+UdEbTpviT/j/igJodQQpnlLs+eXpz117SR1hIbzQ98cIjTG\n/2/kInQz9bFIbFv5XqREvC9tNnqzm5QNudBq4iqUT73BRW8L5su8SZWTo4jG\nfIa1pT1qgAmlLVZxv3RzZLHBpop6CcmbDXXsM+ThrvibhL04MIRt3bEBP+cJ\n4IJLpjicm7HaE0HrH+5O0OwV7rThGGC04CI4kOxql/8OonPpMVUNj4QADu4G\n3PRL\r\n=99Jr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7Ncbr2CtaGvFSkVpwI3nd5Ftwu8NcDNN8q6YJ4BBC/AiEA3UyQRoPK2xJhNkBmFob6yrbHQT6EiZDjgs563JWQHHw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.2e769e3c.0_1611619530552_0.2679417504357797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.14e01610.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-p+NSB3z7CAsCjUEScT5EiZcmyMZrmYI3LNYudF66CzmvXk6HtUPutXL3OG914ffaOiu6v0YqzLhSb3mbs+Le6g==","shasum":"9b33cb3a2892d1da0a8e8ccd980c152de3ef0059","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.14e01610.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQTCRA9TVsSAnZWagAA0ngP/RRRG1VV0ukogi62oJdR\nfh5deRWn6WiewMBPEjjEmg9ENMcK78Twc8G41f8DANE6qIb2/cGMUdTrvM2Y\nGtetHFvSHTgpKEjx3kIuXfdQ7nKCqiY+ariRxFteKRak6QGFWLiyzsyj/mVz\ncPqVR11uSU04vgdmpHB7yiRh4hRRywfZvv3snedC2Rz7IOulxqpGzlNoanmP\n72HFQE4m0cQdezsd9017SlSRPQ1ppo638wMrf2tnTYA24g+Tw1SBiyDfgOfw\nf422mN9JKrLaeBelMslGjuiv1dS9NoI976l0H8zQV/xJ9RgZahsuLBuoPSIb\ny97Cdo3BgmTA1O9UvPAblzRSMzTbLI/0xjFQDIP271cOJ1blRhcty78UEpFQ\n3lTw5//936PDjfxtFvNFbtjACQVBvLCbFUHLpQ9MvR+3a3ClUEeTBcM0OPtq\nk7RerWt73LAT6UScrgNu471jXJeswEm86CXUywtQpWxj7ijytYJ8ZYoWNhL3\n1mlHR1pweDllSSKrDX9DvTMFmRpBVAOgKV6o8Pv+2XPiPSLfdokd5rZUW1n1\n2uNzf1lEOWUXQvAC3FrjZmwadjI1iu4bxCcgai0ORzU/PHVdC44FcltMrzqn\nDzNCX0dVLd/nwr6ktmVhPxKoPK+IwFdxummGnyMySJX8Xa8gyHiXeRhury5e\nfBy8\r\n=8leB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPNuFEtaSxiZMB1xWJAFPvICqQGBSRuriHfv2ryScEQgIhAJcEg9ER/bU58qqnx/pP/gHMJbALzqeyUi0+ZtDEURPe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.14e01610.0_1611777042856_0.12226598351338192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.5de00c1b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lfFwac4OoVUHSBCpNOx6Y7LZxhUvWY/urVHTr3Gke6z65GnDqoivOPGZJ4wePUezjDOkRvhiqt9LMEokgNabOQ==","shasum":"d20355c1aeed9265bf5ae114c0d1885c6d0cd175","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.5de00c1b.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcoVCRA9TVsSAnZWagAA2YQP/1BZKyWhxMviVS5DqTjf\n2RkL2Lhb2yLYd5bEXs0gzXA0VdiXGCumWzIqQiGs7FB4Ibq55AppIL0y5YxC\n5VPShvQhauY4fzqdOdYMlhsc97cwwqHAqZczAC3c3ybKMma7BVk86xzUNiR+\nN4uvLbkob3klUaRzYHyf1rUKPedzUE9ATCaILdG6coT2ty96F+//g0aEoXAU\nPwesY0WdqKvyyhY647Kx1O1CarW5UnrZY30asDjEArzgMbrwhuu14yI2LUAZ\nSQdSPeJCACWxNQdwkCVua2k1RBMXGbcNz65vdVeIjEbxZ+tYkUkG1noLF6gS\nTI+L34V2+T/muMd0GJPs0YeHBXY4qolaTqL/i7YWvAIobljmgnob8lEPrEvh\nXUsljNXxKGvRfowQha4oQYxJgaVEZEqYwkl1yPZAEoy+tjqUYuCBPT3txNhr\nkdxYzhJqwrND597FjezEh6KYrCeJmfhjYtlwHfeFp7SMwF/bNiihphBVVUge\nr5DgMkEeuvSdKWpxXQzr4XW/fnaAoY8Xr0Bj+a/y/nCKFnBgkhL7JnJ5+388\nm2DlyBKbfpZyPq3MZrTRsj44vBre41mNSR9NYJXtQ873Q+mRd71T1v/52IU5\nDR3BOd4fwytMrw8eJFBZwW0Vat4SFDtNF7RhlV6LlFnDftIgwM7dY5KQJBSv\n8oO2\r\n=HQo+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvjYt06Xm6NUYXNr2SNdS7KgKOBTLWyHuU89YUoGkdBAiEA2fJNU1/iwkMLPc9lWcE2FHSJyS4j3YrjM39nwuRsAYc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.5de00c1b.0_1611778580596_0.6181977898901618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.5a328336.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-GF8nXHFqPlYdMgAVqL9iuWd/BsEwkS9r+fAn0rm8enOCHReonXHy+vpW9Psuitq82tWJiTRIP8j65iJLIrLViA==","shasum":"6199b2b3337f3b9729a92cc627cc04cfb6dae21c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.5a328336.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZRCRA9TVsSAnZWagAAHFUP/1TIEP3IAbsyf99K/HIq\njLwBapsB19el1AnjNIs4us3UmYyclqKPKoKdeKEp/GLIiJFKtgt3ONrzdprT\nHSkNCYM0XltWs9C2ct1avg37qyRx4S1tmAphyHD/v54SaARBeTIEO5AW+LWr\nnTaABwa0mDbBNLJiUTsst457IZC8ojw6Y9X2MQtI7itW8zt5g4lfuUXPEKMo\nAJikEHRJGb/2CBlF0WV8hcaXJwgQgPjmTjY+J+b7ptf152j428HpIykhF6qj\ncrPg73mAeSCFFY6TBsCbSdZrUxYj+s/o7nAvzRX9MHmvvxnAxJP7RPaKzp6o\nwUvGrYPP6y1pRScg3rM4bo6musvWJhkydy8OEqKFXNtlbLwobY+tlqkWOJkM\np00hOpFFfygG9YDREreG0CPQ372evK3izeM0RTPRVLKIEpAPX39zgAtWgXHA\njI9fcEnThXAngnmsau0W9QFKEhdB4pm37s+8wUvbrU+UcaqOcExEI+veZiw1\nqemcjSuPkX2N2rLwhyEQrjsswg1ul63CtJp3tDJotybqlJlOk4tHSI8vKbVH\nXQlxdJSWZu43YpF2AWsdkEstW2eUimXqiFsVYnjWGsVbKFP5AErwR6S2Zyz1\nGPbnFhlyNTVbmK6+DgMyqwF92dYh/uymQHad+gb7wnPw/EzIq40+BH1aXg0n\nmJCZ\r\n=7nNx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoeHXE5OgASkTXraL7kgE1Os9Ax2UYAQzvFdVPLQl0mAiBoJLtYrJwCynRFTKJhJbZ7aLhRftMkExHJbjALAzg0PQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.5a328336.0_1611863633165_0.4252989721979443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.533b1251.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-wv2CkPK14ByJAz435ulCeLnw0HmAJJWxRp9mUEvFAjWQsmg/xX5i4OHxS5z7SRHYo8Ih/PQjSFykqft0LpPFpA==","shasum":"0df575da4556a37a1113486857e9233b61d32aee","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.533b1251.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCV6CRA9TVsSAnZWagAACY4QAIeVt3XM//hZx9tVxdSr\nvGCaWtr4Y0rgYr1TaJLN5zg9w8sXKleSAikK9eCQ9xBY6uNJIf4r0kK0Hr3u\nal+xTpX8E2dIdsNp9uvtltw60fmwJmYkv9dGUoc8IwMJTnIVs1lxBgqOnGQj\nZqsAS4OojbGCmwisMCkRhrVkb54ckdkCdQKxBiuR+LcFChq3nmBoRYD9wwtS\n3T5C3ZFwoFXpr6ctPoJJjppGnNgGDZsRyHbEMIsBWTHiRBTDlMgFxLp6NwqA\nAswN6CTjv6R5vlFSGVK9zmLimjJN/jLqcM7y1qYepyqLCeMZBelTXbG4u8nJ\naQ8C4OPAShlldCEBjI/uUMKRTsKNxyjNZdSu8EItm5D3EkOO8Lduo6sAxYB9\nve3hG2ektdgTX1O/8tpJBQwv01Oo4Y5pc1feIaKIe0WhCeP0DJStlr+pBWCS\nIbtJXjdKMRO3u0IVLClPYizAFO5jnLHO9iptR9gd+eIMEWUBFWvc1p9Og5H5\nEWYdab1RmBVB8fUXqATAPk6q8/lSU2QXIhvSySBeGVhuiJR9/LkXnU5JVWC8\nlroG4sm7qDZvQkhYKApYwMCsENrI2W/zAtbzBvRQCBw2ad7wPpMJq08Dxl0W\n1CLSR9vFvS4qbI/QCw5zDph7wnBqSyVGN5YKxnBj6z6uohOT+RhIrQ1c3E64\nqT8/\r\n=Q+6Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC51UaTlJDLtIkVk7e/uazmU2qqZoqBTro/g6Qg534J7AIgPVregwm1uXwSjTY8PfpVBQefAGTiOzUtmEVC80osJBw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.533b1251.0_1611933050315_0.3890232170336265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.ab5c0a10.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-8WmRnfdl+CpAIP5UE4IB2a3E8wk2b9bk/u3osaHbz/cUffCK+EmdOjErS6tKbHZ72klxd7nZyEQVl0WtgQ8zTw==","shasum":"4890df74ea3822d1e7848ecef0274145f5c9ccbe","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.ab5c0a10.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbMnCRA9TVsSAnZWagAA3GIP/3qDwFS2djplmQWzzOuJ\nZde7pbvXOY29HUHLtRnsK9dkmBbaubm281W/RNDZmU+/0mnYHRhh+v9g0lZh\nWW73tPTnTXzqNNuuIfqqe7npfWax2VN+QAu1UaYO5WOOyW9RX1DCTBjRyTyK\n025eLKsT0NhZp64X2J3jWYOqV2yE458OnJsu9ngUpTV7fRdOa5gi21eLIsHF\nHoUcPX4LwFAl6vTh5epAcQ8a9txaezbDfL6xqyYdhDxUPRA2gms4tA/S1YkK\nAk8aOJKFR4ZcMDe45B/CKEJzWvjCScOMnnk6+I3r+WmcCoDpz3fIZCY4OlRM\naLP/3vSgCyhlE6toyaOrIKxMR6j7F8dX0+MnsjqsGx5xZcrN4njRvyCAx567\nMJK/C5/slyqoMD1gQyYxO7qWK2CfZCFAvj+jWvR3tOSTNHJvzpr5WvGzW+2h\nLAWgziIFxWv1U8znXpZs+6+rNwdLFIax7Lt5YXr8BfE4yM3AlQSV2ku4Cs/Q\n/0IVnD5SGDk1xbxZUFcaErwZioaTBFgZWNZVLTTar5ZjGCWuGS1cLg6zxwkX\nlaVktSnOYJ05FSi8maCgwQNGr95EoG82YjQx62EKZ78DtancQswaRlzSOvb7\n9B4KOQxGJDHVrfRrNeae0d9dkM6auBwzLdyq0fy4LRqodqHsVF9PYFhmZnlH\nx0kR\r\n=Bv1J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdHLnZX6VVGZQ+L9hZuUODJelFcLakWhrPrNcfzt91GgIgC6GzcqanxmEIJ3Fm/utP68HlYmkcxyk7SNIRDMgUsV8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.ab5c0a10.0_1612296999106_0.366127067895037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b7a40b27.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-hHOUq4OpXySvTOCFRL/oAq3kf5ARJn36yFMX5UcsfgnOJ4optA5t+ClIzzbfHHr9hdosRMiaE2BoZdeI3Ilmiw==","shasum":"6b1e685a60218869e66633ede8977f2fbd9e2fe6","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b7a40b27.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrsFCRA9TVsSAnZWagAA4eoQAI/BX/XTkNz8Bl1Wbo0c\nCdWQjwXhhZNAyzR1KhUJxt7EjZk4jUmJ+6lhXyjdFCyVRjGh2A9SY8ojR3I+\nENNOWb0x8KZ+p/CPZp05wekWg1VmvvS/QhtrdCO/GwfIQ/72EiaYKOn6mebm\nwh0eFzuyLGlgZSEa3BE1lx0YJaBX8Xo3sRabYBSjSP05RRJ+0mM3Hy4HwEjP\nCekypW3yYaTh6iWb1UBTesxirKeAB4aR8+1WtvA69o0UeOEkLSdyKYAYtKe0\necPW335Ot+HrcURC9TLGDfJGN5UWf8BnV3kx3JpKizHVPtS0j32xlnJAP7e7\nLvrUdhutlU9c2/INjWU0WgMeGmifGVkvNYlgjJgu50sQHX6KEUWNrjxYN+j1\nblrRaSGmCND/2jWCkIWzKpKk2pufmvbeUA3qEEe+fGRVigNoFZjYSNV6d1sY\nNrU+ofBW8XTc8ygLwfRT78YxExecALTKHEy3+16ezhyPqzp4pvrGpu9DJOt9\n/3yCy47euKrl2UGpDLgu9KzCANSxPY/RaFokZhJTh3JWYnxXpK5oerO9DrDp\nycrTanoQgXiKrXgxvi8OGU/iKwHp32ggqX3r9wbrbu1muq3U3/xbWqQ01uqc\nFYM1rDldCz5557etSMbMB/lnwb1EPvdb3S5Qr0vno5Un9sthRvZElbn1zKqL\niB1N\r\n=Woa/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD+0thGsXqZWTp3OO4n+SZP13az0wCKnAzG7khGL7oqgIgKC2HkAI7PcMjMz41i35gVkRIWU3tY7ajk6uSS0If/YI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b7a40b27.0_1612364549028_0.26871917483271224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.0fdee204.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=10.0.0-canary.8e66dbfee.0","@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Vn5A/tRQTbGVFwIXT+4T2NmjMnARWtZxuRIB3JrwXOS3j+EV4DszZ0UVm/pjFa9/c9w6fRqsZ7/bVr+ZG6sNDw==","shasum":"fe02cc82a2bfaebcca90bef78b7f1be2bdc0a163","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.0fdee204.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuxCCRA9TVsSAnZWagAAO8kP/0jSgDGf0OTK+ASQmygk\nXQk/fFSg8B6rHiGwfmNFJwsm3+tH3B2LY0gHug9jqHSbk8kKF2s1yzM80f8a\nXTepKXguyW3ggtcAqOalO6sUf4B7HMRQj2Vd+GjZ9nKZNisRt8UnVZ5s8tSy\nXsyKH7QvfgGMZ5B5tP5FUxBwQF+lBQnAOrSdAm9HOvgUPfe9GT47+eUsgNV5\nkppf8oZed84ajAdui1D775ujueRxC7kJj5iNROzwK6mtk07Inm1BZg5tWgyx\nX3st2vm3ks+G6Na25IVPdLG4+lZrxxZMxtqXH9i3+YAoGPOuoTdrgIhylkA+\nZyANPgt15HvV8GOdfZGH8GApsko/KzM/zUAJtQ428dLaxGjcCFXiKvB5bZG7\nTcihDs5Jz4UB9yey7ZKm+kxUyb3O1U1qO5Y5Qp/BTQi8eUaqTSC9989GAhi2\nb8ummnOfYQTbq08tKQlSsx9IRpXyRuxMCh1xkZaZnJ31abjKoQXLTVOYB4Cf\nJ9YLPZPuePT7w+B1ENJVE9Y51lZ3Ve5H4NJPqU061q3E+PCmd34zcP5DoOj7\nYOaOJVeYkIkVmDY+hOtV5L7fjz8zmA7BLoyYA3fSij983oik0STNFDJ6KpxT\nBuGVNdmwaUmdbOJMmisRLY6rO33A6p68yRAhzueI3AUnpqeJlSajUVFgjgkV\nFXLe\r\n=Qi1G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChMFGW5DpU7dbjNOgP4BUO+Xxoa8ZSumEJayTwznTzYwIhANhJSrCRbr65Cr66somf4IMWZzJDN676Waxrdn0DUtOg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.0fdee204.0_1612377153816_0.1800891086494254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.5160e548.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b5227247d.0","@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-opTr71h8QlZQIwaiF8o4n2s7eMlDXfbZMXb7qxirOs1wIkywJ0CROK2a6MjrNnOQ1qxdoWz449fB/5GxREpU8w==","shasum":"ace716f568e1a27d4ab7c8f881bcd4c121b0a70b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.5160e548.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnKCRA9TVsSAnZWagAAs4gP/0BIIiU48ec30uaOYlR9\nKxfeN6ov/+YqGt+vy61osbbH79YhQKwJ4CQzIT+8PZ1xPYHL+dOvQoHxkL7k\noRVt83SUWIAdVjR52GONfdepIFXOp/0immEkRhp0ZOU5iPF+8BRMEiENcwEs\nqA2olfKuoIkXPDvkcLRsVPswR6L7LelzxsbcdplmDHtnaQd0BpqjZAQI+fZ9\npCs91Tk3tQ82qqyezV7Bp/VRUrFuWg41CKACT659kL4p5kMWyOncfGdhrY56\npi0iSjK/tGxyJYK6XKFxa7j3R7RH6uzJrrP79oynHrmoJR6VWETFaLNWsk1w\nD+12wNI6Hp57vpVXXcZj5etVW4j3QbpTvi0q5JAknqxOGC7CxcgDx+c46Kn5\nwhnFNB7SMGYprr2CqysJN5PreJpnU+jkEdWNglt90gTclzDrgbQxMfCV24WU\nXgqdRc1ZIKS3FBpSOMMxTvAdNt04RRbnANoItuGRrtrgB9QemHdeTP+BYTU3\nPBOXM3MjfM5XDYtnWMyTNv3jtf0CBiPfc4Pq+7Grl1kaJE7l1wECnJqgQosx\nhLh2TyqYsjkmFUGPFGHPaRzAT8tNxfQHJqxhv5wHR7SpiH9ZP8FRycIrCD7l\n54IWlwGtdOM16ajRAi276eCXqbSvWmIMwPadihgySylXz3uA+polsUQVYx7k\nTleW\r\n=J14J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSOBJXncErik2GPy0s8XLnq/v4h59aYKWvPKwtvhWPtgIhAKFeD2cH/o6PXlAtLrDPm3PzKQ3k9xN+bLXmmDFzb0Kt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.5160e548.0_1612569033809_0.6816990059832311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.4fa2daec.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.aac8f5d9a.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-VCRiwfT2Gq1SthG4IxFmn/xI3TYs0VFuzZwt4TUeT8NGWliswNhvS1XTK0vCByfLLyFXrfTaOfUJ5apb5oXeyQ==","shasum":"1851900265f4e2896a5b049470b6843aa706739d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.4fa2daec.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdSrCRA9TVsSAnZWagAAU2MP/2R0yoHl0rt++mC6Wsjq\nOhtvY76ikfdMe8xbp1EvQsoQ7JQHGuTmunsV84RHuQUTsXx2HPmNZu5wGLPr\ne0zGQRTtfvFkgTdzandAcraYmh8qzuoURG7n7NY3Z4HIeli3es3XUSMJB3vu\n2YsmZMHnl/AKoHTTxLs5QNyl5Z2WFb9s85gsJ5MgPftBK2V6wZMQ5RHSVMtU\nfLPIln1GXasmY8K08Cv/+5IHBFyPMX5VKta2h/DA2Prds7WpjwnRkB0QDYoy\ndYBKVI3e0e/a80G9p49KShMZKtc9RL1nJywHxNXxob2Xos/92yYSDr8abOR8\ntz1o9ucUtWr3FRB4VUvKyqpd+52dCdQCazeKwAceeo1mpR9FMu1DpOaGAA/E\nyI9uX6olYjrZ3TCxjxCFSJCHPghrlCV5W1egZMCtqLBKPrEhBx50F5o7OswJ\nfeacSpi5T3RaFcUXTWTvj+XRDMxA+kn7FUuxGAjuRBvZQI2EsyVzvNFC5TuT\nTZ167k26/H31mA0iTZOncL1l+oFpeyXr7rJr1lIxW6nF8uQTTHDdHWnUGWH+\nY91h9KJGA5RpcjebUoYKjXrUlwWr041RdomVftdRzuO+XxaWclJyAYL2uQK7\nqdS1sPAuaRuA1EyY3i80bQcMzAcpOljqegRJtWhXd/RhMybLrtwpeMkvrWR5\nTM9x\r\n=k/h2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzDGgY3Zhut2icfhEmTVguQn5G4lbtLIKZcf4GwdlItwIgKMxotvJdhcDfHoqy1N7KeH2qyQPvXs55rX16mGVKv/s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.4fa2daec.0_1612829866446_0.3878173859507734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.67f285fb.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.750e18fc7.0","@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-WEhybBoIX+PBRVniAWdTT6MWRR0C0tclNiSuaB0hSY0GnnnilUzTkuAwd4IDrBJ+hedqe9WnzasR8xof7wFGzg==","shasum":"f5b8e454945effeb6ecc8f09d288d2340ddfc019","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.67f285fb.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxICRA9TVsSAnZWagAA7LMQAJwO+6yOK4nQECiqNrl+\n71hHRw0jH/WYaqTHfqSBw9TYKAIbbYlWr8n32CGjzbpDFTNOXhlODxYLH9N1\n/GvGFyFgaVgt0se3SiduK8tOgMr8R0ld4hxYHqB87indoYkYPJh1p+iu/lnB\nrhfxdkgR9h+YNIbiDs1l9XCgfUPoH5hLSNW1sTtSM6yfuEy6eWsFFp8VDmnI\nz7VIJDy1G0eL563vlyMgj+QFUnrZvlcDkVrKxI3P+IvhRjQ8ocadbu9Avd+/\nuLqDlyT6BqYho5ArxvCmmCFmc3Z78TfeqpS7PE2iM4pxnTCdKEkiLU7CAsja\nqgkmzkL7xw/wH977ZViJflbZrne1+JTsd7mj9O37zfnwHKfLJlXDXeYqXDbe\nEIXSBXkazNRUCsIAviM85mwlmxNDsstSMwFZ0RtCLCqEspyTEF2yHZZEZoF2\nGg9JM1Mg22slC0xNb7y2qECP/ox8DgrDzi6sLgH+J7AjFfAAL8czzgZbgmPW\nhy7PnJQdDLrzW2kyJ5dquPzQQS65jUJwaU4wxgNT9X4saokjnlgErhQfO6e2\n/PWKoiZliJIc0rQvfwJ4E4cefJy+icdRTR921UP83GY/iJzjFUL9S8jXPssA\nPYA/DfNk4o8cby8/pnHDAmek58fD5y/JA0qwOjKEUzlU1sHdSKYu87rOS6kQ\nDrj3\r\n=kbUE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD24CT9rOws8oYifRCXnuzZZN4BQPdqU6YOLAXvoeA8IwIhALV678mFOCjoqqNIgjlwPohgf2sTa15T4YYafVoB7ct2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.67f285fb.0_1612831816356_0.48618813775699454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.58cd5a70.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b62b1266d.0","@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-TbKe4kxKFb48lnDksyu72okY/XSi+Zk6RUHrsRE4kaL9ZheS52oHMtLGjCUty6yIQ0DZKmkXyBcgWMEInd8cWw==","shasum":"957e112a755a49362bed015521fac737ea332ab0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.58cd5a70.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZbcCRA9TVsSAnZWagAASmYP/0g6II0VRHXr4Q5Tp1gn\nATYVlgSbRxnFH2YE3XVpnhMnktbSHeQ/z+/exszICaySpyImf3c1TH09bC/T\nWu5SCZoRINMUJMmfl+0rbr3XVW+Q+20heTv5Ai9A6oXRCfanWxzMRmhb1NIW\nnFmWDBEDQgvj7bqz6fWriYpoxYitPFvDVtU1bO+aMI0FWcvtWMOtoIPzJ04t\npmxXze6V1wbtGKZzVbH7OLSOcdKRmttssswkAD+EPiMXk4Cq5QryvN+11SZz\nKoFAqlB1nd228pKG//yBuRxX2k6YqkrsvMPeRArnF52dXPFwIEywdekxxKJ1\niUK9vCVQZVz5LWWXlpWv7TBi+XIzW+DlRdBpQjNjUV3K0OwOMvrj75z/d+6X\nr3i5OG8clmhRo15S7s2I0qhUYgb/KLfPLdLoEU9jfPtQCWD4orLt+xFQRMOS\nKsHXhZoWih9ofHGqjpdYIrzS/AIpV4GXoj3sXSqQ28yCtsdZZI8YXIHdzlnT\nK932KlGLYrQ2KqXVm8qkqj5hd9WfzAxw1+J86FBZOL9CGS/FoKrITzI14ZTP\nL48KAatXHPFfxPc/v8LPEvpRmbKR3SQrT4fXbOqY1NCKeGE+vGS8dVjl0dLK\nShxQzpYfDTwi7ZxzO8uglRCxZvxBZ+5dYVhR91c3oNmj6qqkQlBSUqZ3dYrH\njIQc\r\n=enue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKU24zS2NYoGJeYaT6U2wv8ZYXa+kJiBaeJDJTJC+WrAiEAtCE11zv20xpfeyw+tjW/w9j30F+FMYzUWpCLYQvmkuo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.58cd5a70.0_1613076187777_0.03705311897432839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.8107ca43.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-9AikO5UmIkXHXo2aHiIcIeBbn0Wn16a4Ib1/YZM6X0YtOugLrlCia1f0i19pCyY9O1E5cKMZicVSOBjCFpc9jA==","shasum":"4ad8b0a41b1f669d78583678e161541d6bd9ac1b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.8107ca43.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2JCRA9TVsSAnZWagAA45YP/1ORcIiIuo1zz4bHyt+U\nbLZvfrxAo3fWr+Sa4oNgvvSIV0ndJImd32TxnDOG/J9JEWEyvS7IrFaCqr3C\n3LeuUbZzpZUrV86KT5QlsIOLddfYXExh7KJkXkVk8iMkTYV+xfzLHTEvtEWu\nBcad0aXO4D1IMsQXmKYTwghs55Y7RoqPXwzRG3GbJaEfhNhihm5vPBgQrDoD\nrKMmuSCNA1PNCUoq3yJOQFVgDv409jYxupvKrfutsHkFErJGZZl2Ww1hOEZ2\nIVWt9RuEkF3kj4bcEDGqVI5MGnVPZYh/6Wisuun7htUKMLVD+UAqN/IEdBgA\nVn41Hf8GjmR4IxHmNFOMKuqOWmtaNJ6HRQZnWmJry9aRGC+1RQuUiBk2EoVI\na9q2NTQH4WavXgm37uuvC+xtqvxJ+/pVHr8VSP/M0SJTUc2lKx5iyWrPcNCE\nx4R2E9LsTloou/aw91uOwEBqHWiO8uHnSUAj8JmHsW4ORxRi4eCwWF2j/RlR\nrJoMs9MzloK5MYpAgxoOI/+eUVfrSOASHbYrwypqSB7P3oBVNRDKyjtP1SP+\n0Q6l43GXBYONmOgPXVP+5+8xXrIXhKtI9U0+Ny9hKAhldosRA8sAOvrjwMZ4\nRXReefyb2bq4HePnpJSZV/AcdRHiSUZmBegVWZOa1xBA0q1wTIRIU2WFcoko\naL/H\r\n=htLu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiYBfmnSgPEiFDm+wt2ialBgmpiJYX8qSfLHr+hz1CxQIhALlPb+bHZmofJ+Q1btqldkX8qHJdaxUb7+Im/Vl2WN2c"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.8107ca43.0_1613086088929_0.24222220551594753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.d35d64ef.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-vJYOiVaXHtK7P1JXyK4ed0cFRAL7zLZskRk7GNjPjRJEv5t6o4DzgkXpC4njCQpTMhe4W/z5+Fng5fNvCXIQlA==","shasum":"8c0f8411e80d999c67fd8dc943b2793125f14a2d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.d35d64ef.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcDbCRA9TVsSAnZWagAAjGoP/33hdFdeTyM1JEcAujZj\nCKtNqNKRYY10gcBB1KhnYgEWGiMDqom+xFwmHt9aQScy9cJNS46FxneZlEW9\n3mMLYvG/7SGqZCDO/QJn0707xwW3v6wq0sRf6Z7vBtzng6LXEI0xY5h0TOq+\nCVK3dbnDK0DIu3GsjU17xC/FfXu5GsFNH67igBIFXuF4g2atCuir96QbbHe2\nupXRa03jwSH5LGng92/Iqxt+Oqjy2XFGbvqDonGsB0koq7Whw+E9zrn9LMv6\nxL+nRLG48gXHDV04btA8LIjwgQ357O7HvT1L/3vKinC0C5YlKZN8XTx2Tmqz\n/UPBERK/JupnBngQXVYRqv8/FWSw6nkkpsGwhORWiWeWpnP2A3zgFI31Yus8\nNi6509ghTxCpPVr2La3MUYySoq2PmfEEixkVwRq1tbpTwmDk6VoMbSplU+oH\nb8h25uzmVKM1KLfD9OyDid41sFQcX/2MfYMSuTtAu/128IVzdH/+E8oEdKK7\nCJk7y31rDGYkoKYn0H75u7gf0wmkJQH38leTqu9nQcQoDRVes7AXyiBnxyb4\nDjgEs5rpK9phhgYQ4V0oUhfTgZ5okM5Z+J7i6U7INIVBI+5u8WH+R1kLpRcS\nSa1pc7a7xvuU/MdkvTzw9zZ4S4g2kMHIsSS2HD6wbrhpSgpu5bP4uNBLC66E\nJE4L\r\n=ESp8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6raMAS2iLo3rSDavWFR/lEFPGV7ulJe8PG8vfOltlDgIhAI7N9rcpicBDY9U19onxviLDyqcqDte9iC+WlvgMB5bw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.d35d64ef.0_1613086938837_0.061085360249806486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.78bcf058.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Fj1JouhGZrxaoBeQg6mau5KjAedv86pcXdNKBPILFcC2Ekn6n7Tf5eTRSxqKhi8yPWOCfZp6UqQJDVlsqubkfQ==","shasum":"4e09fd25ea83bdd874a99f9d4e83d0f43d0a0b1e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.78bcf058.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdAjCRA9TVsSAnZWagAAajIP+QFS4dxhsXvvBRZVvG0a\nwC65Zuop8PeePU78K6SLySROcJs61fDAoHQWjDCzbbEsL7pOtk4RIidt7q65\nyvDBYX8gcS60+uHtDcMXC6jVv4q42QePVu3Gl8yzWSZYNrQ0+Hd2vkjcjAZC\nH7poPjKVzEMqGG+vqIXlF+QWX4vkIvBY9hbio1ecjIcoAozYU77AdR1Jt3To\nWGhVwf4W/iXxjiQkfS9qdoKe0NHV7LcaWqQl6iJDgjQhivwR8GrdJNMFoTZi\nivTS9dg9W2QuYNTjIqcQUjJ2gWzVXkGFu7857O6z09HyMu6gUYJJOc+IrRLW\nswGuCaQ4ESZZn3GiVgUyx3UG6siQ8y/baRKYZwvItANqauTx9NdYdFU++kGr\nDS+V5u9HJ1oV8czrrNREVb6+zlgBPSz7+XHsbFFubX/L+fINfRMyRYZe92rM\n8pHN7OtKr872AOlkrC7Q/EbcLHRXSxchjot8Zp8LN9wl8hby23qY4diWkIV1\nZI1thYv+SG7oNv0lKM5f3DY4jGXZQYVPK+KGaPTI8YwlctFyvkOI8b/wubz1\nRMHSIwwbr6uxvS/o7NuARLVV93pWnejjxD3Sg4PtvlhQLiBR1S7lawEFXOzn\npotCzNh1R+gcVR0qWq/1kXEz2fmNWBX4Fja7v4bWD0Q7XNzyY7q5JFxyDiZH\n0CzE\r\n=4/35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4z5PqCqDe7SdCvtE+qeAxU2AL4tx/eKObiRTYBkP3NAiEA5lhHjPiNUWQlSE+zkLJkQzU3ChBGfYWBGb8R6r+acIA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.78bcf058.0_1613090851266_0.9430636277718534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.0c6908fd.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.ed88df700.0","@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-bMUAethx3rup9detLAcrVXXjb7GGNDFNEG3bEMjFAi1rZ12X4vqnFo2dZ9e3247I4V+AG/bYn5+CzFhOSMW7SQ==","shasum":"185b9f207419ba94bd5a88d6a48458bf0ce78c09","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.0c6908fd.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdiyCRA9TVsSAnZWagAA2tsP/iNwC+vtIUOh4UlQFoNU\nSj9HU0m7ZjXU3hzYHw0RNcd7w8hChyQm0Uti/RhEQF7eRHKDHYnlH24QTpt6\n+KFtOh9gsXHUM2r8HFPytz0OheFDdmktVfrcsHjOJX2nOV2p9lftfXdeavMN\nfHZEdcQ03nCkgB/1JAU8DA597Y+2gyW6nZUMRohEEkl3+AewW4QLfjhVv75P\ncpuLgBjCryXRojxi4cN67N343H+N/taGWIbYRq4JCPxZBWmAxgMEn98gMGzM\nD78wjZFDsD07uM9JdOS9cvdkilTVDFlg79rCNBJz42Je5t0SR2m5E4jah668\n4qVMat/7JxMANXpgfzeWQGQf7ENjRRhC2zdgBMLLU7Lgu50nQ8lNNlEj9kqp\nemgaGYDwM3zl8sm3AKHnjyjwesH8IvsOzZIEGmAZ1EEGAbykeNjDMKj2hUC9\nf5aMOtJzf0n6wi0Xi4HE1VRZs2hwLbxSJhD6jPcDQhBwaQZQgpDvJxUb/4vJ\n0gWS9rI+Y5Mzzu7G9zpW3N2ChYvcYnjhpfWSwkrMDMPpftAGQKD2rsViye3X\nDgABtETOddZVtxZz1uApdn/eC+BPfwcctSw8vqkT4Gv805VsLyNI7kBkNVVx\nbKiXM21OhAyyb9V2N+pABfQDYEJeJcgMdzr6VqRD/uMdoo7NgsdVcjawQeq4\nahj1\r\n=cEVA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyWgSUHypBNLZdWgxo2Yqx9HZzV6I1RDPy7YlTvVpN2QIgZMlkHd+HekdB1CSLlkEuu5bTMS+Gy0/CbRrwpfdfWZI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.0c6908fd.0_1613093041361_0.9099831131712921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.f1f34ee0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.71fe9a067.0","@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-NnhXz8lrXfpAVlovqA4Qknw/j8+JlSRPy74W95UdP/pBDRIkcV3h8HM/AjnKfuYCKJ8bHzGtoqQRcbmkbyFhDA==","shasum":"02e1d5568d8a069a7cfc3659d0ca99c93e5911df","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.f1f34ee0.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJOCRA9TVsSAnZWagAAV0UP/2dTRkcB0+eqf1Prv9XJ\nZPwZGeq8iXu3pH8TAxY8DDeZ9+DYMJxkLBtXLA0A55eEII8Qe0V556wbJqO4\nOHbZ84hM74IXZMzYxa/tzxNRDpjnSlv8Swc7F7cv/XFRV43X0E+gwEa5OPMw\ntJIHj9gDuXjPQ1PFqPqoI6AEvKokr4km1EzAZv8iHLqHoEKx8GdmcIqTSRZR\niWdhcC36ygJupS+4e263seQPHHVkq/iogf9qeLBH9hqvU+QIZ0t0IGZd0eKg\nU492uY5Rbkg3Jm+fFFVZbNZiVLKNSv2CHaB5RfRZDaO0aYnWsYM+j3vI9Xrf\nfqzm85lix/McxfFUD/BuRxv+zOrwF923IYPfVCrCC10Ou2iCTCNZSIOZRm7F\nrkmxk7OVha7Wfg5AJP8x+K63bMqUDGxfeZWyorpRQlxAe378GCqNYBQs5vuZ\nZyJvxIRF++ZO41bNTcY19pzTXzbkYqBCrL2ybgAEQ5SQXwHWtlozgeihaKMU\nNKG8HRH6d7/GfTbZgZkxw6gPodZs27t91ZhCLIzU8FIhRIBUW48jHo3vvkfB\njcnszgJcvsRj+wSKkC7QpJZbtepCKbIFh1ypm9cv7aMrCCMku+/FhOUR9dL+\nX49s23pmtFiwXbfKP7iXdUimCFBVGXBrTnTqIwd9za9kUzf2DlI+vw4PLC4L\nbgp9\r\n=UpTS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXGwNPPLfZVAiKWJk0lizGCEaifoSEZp2evcHkvN8jJQIhAN09nN6FdizCi/J+cf+LVRiLH4QPgWr437AXaR9Zs7wq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.f1f34ee0.0_1613161037602_0.4726224839056361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.d84df029.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0fd56a86b.0","@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-SnbJIxvM84xEQeawAe6jI0EhTBan4OrGuPCH+OIwlt5dBjkZ8a+uRW3vvlb2/HBhiLMnqRD0wperP+43K02hWw==","shasum":"d61024da725aa21aa8e195e6b017fa0b892e387b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.d84df029.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBfHCRA9TVsSAnZWagAAkqAQAIihOUMNkzRtxxZQYJbB\neRBlhq/RYsZuenJDGpy9EZoJcJFFaIM2A8wsexUjnrR3tbK5Hld9vvv+EBmE\nfLCFvkE7l0rDYjqgISD1XBIlbdKGeU0neNQ6KVx409VPE112NFsmrND7mwXT\ndb/V5Un7u1azXf/JH+TdYYHnBdlEdtjMMk8guvE1bLYCzJKHqjdmq9fWwbGj\n5KRSdd6H3roIjKfjEaH1XseR0mmgNzX9DaN9DoqROFpoRHdVaeuHqM+6zle9\nOHy22SF5feB4fifpYk4iUfIATT03em1UDiion4JRb9qWBIldQ1yKvhd1BRoC\n9vbRiseS8e81CA1RpLTzX65jUXh/ZUdtCYUz7Yr5qsDDh8Ew5YM4tx9RXYv9\nOfprYWQ0A2GhIcBTbtbatox6uaAMJMf7SA1KizqCGxnR7AD/HDIHWul1dOrH\n2sp7+6jtYPDvKjRgK5I8pkm1Ieykb2J5aXLWJDLcOY1WLjq/IXzgrK15G35d\ngfcScxyB7s/BoCivV4Q/jkM4PIG2/kcfCwsDx+rghp6UtAWuKWw138UOxORl\nBTYI2b5VeZfqdJKSO2RiNyQzlJ3IAbK5COOAiPET5XI2N18uZPWpBc9yOncX\nwuz04awQt0Qv4w57lcYsYIcU4FXDd2GJIsLauuvXrRFZTeNBzXkNzmTDi6L7\nAcwz\r\n=ZK5c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZNjinVZkdldHW7T8hN/ZurokuACeFBrGRotWIcxkJMAIgTiABBcHwYscaO10y2qHgUbzLnZWYHLRmizDRv5HEnqY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.d84df029.0_1613502406892_0.7823937699479466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.c525f471.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-mqzYX6NNmzjOYomKbeeGcxRzLVBfEhbuU3sNt5io4YO7fyrvYpoaEGSnCLzm/5mn5NbPQuxz1BQRNKBqSHtTNg==","shasum":"78973a6884aa4db84da6528eb86b9845c113a9c0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.c525f471.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYIVCRA9TVsSAnZWagAAM/0P/1uj32eDwTFEEFwEiqUv\n/85xSzcoNGYtIVahGaWKXHDMnosrt3bQ6W8uQt555jDtAigMdrpxtBWOgtK1\nRvhCH+Z51O/aqHUWcHtfhogtRyZyuim2HOXdT78bHxuIIwGEN5CNekOCM10B\nXv8rv/uXNZtz6hGkQ4wyby5Pa6+JyzmmkXaNzCANmXMVxbCiflznIhmG2+Sq\nRJtqd7J1FPye4X1GmqY5ysXZaOcS+tJ/aeuuFJJjgVtJRw7gd2JC9vK1e3B4\n9l+x12rul8/dTrK1yKfHFZpWCEBQsdpCP6y/WDzNGg7N3HjKC3Eg3nDhhUk/\nXeL6/AGf4yQA+AUVBt6LHSmGqMQueypmCx63qUwKkFdQQaUpR0WpYQl1KnSR\nL7prsVHJn+mJu4ditR6i6uDkaPr1fljDLjXXd8TX88r0VyZyV1xgb7d2RiEF\nMkpWoc9JT9b/v+XdxmsWKKNqsGRwRIC4DvfZBGxDNZzPEl1o4zNKdYL8xBLg\ntKJLhNfqXy1kkaiWOXvgNlSsRZmrNyaKtAaeEP0G2kAy6y8XHEfw0vsdtLSQ\nCF7RyKh9/9v2rItzWoH9JU/ZpdSkAptID1Uy/jYTcK3MLkP6adpkVvjmcxI7\ntzxFNyHdEs07tQEoCVT5Uur+PpQLcf5pwD2+SAFjADoTLjRxOK9lWi4Ltdxq\nUy/t\r\n=NYQV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWl9KyGZWJr+gmrLjS/5rKke87t+N3FgRBu51B4EF2sAiBlbBNkM7jv2L11kM7+3EBToYZZBlpWHDkubmdCwktzmg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.c525f471.0_1613595157323_0.17623274736556427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.ba7a1b35.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zGZUBKhlWKYd7KGwlVzp5dJhC5X+pCKZu5dfl9cw8Kgsgh5PXkO6kXgQ5ldJ0nHjztXN5oODQVrCkVMCgTtrFQ==","shasum":"2be53e7a14e80f756ee2a35210590c0d31a086bb","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.ba7a1b35.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwKVCRA9TVsSAnZWagAAB90P/jc4MYeDxBQwwfL5pOve\nzwidoKqaDMYHTT3aC66yCB3igeEfG6B/xv4EnaW9mhvc2TDhg58Y+b5owgRp\n5pnE7e1PULDNjF6P/llfHl3VaezQ0im+HxmJlGIY3hvrup0IX44coxGXrSfH\nvGFm5yeIS/OZZPU3Jw82cKcEZh/O+5e1hxqgCSjrWvZUCjHv2bmxQqg3Ujan\nxvf4/V5OUo3dZCfkrjBw/q6SFOSCVq8p3Yr/jpEUxut40RjdLrWsdyDY62LQ\n4VovzMHBCk8LjyeLpMn8rfYi3TSnOfTLqbKrXU1CByWMHNqA5rXdsKXsflIt\nTebuzb1AkFpgfOAf/P4N+qA3UaV/8Wte9uHk41mnypk0pbln5twSd2rvkAk4\n0SRY1Sovw3THl2y6Xi8KpLwyoalnvSIdAnUyot3/HVyBIrYVvc4z5gU5H9oi\nI587iMU70ff20ztSQ6gUns1YtcXukmZm06gQFQcOH1LztUfAsrf1POIx+nku\n1Gd7jZT6q1TfldXMdp4ojv0NOvwXNeA+jmvObMkOm4KoXhbdKNtIWcyl7Rdy\nsdjprTscjlfdh+Px+oL3xMVehDQvhnYhsq+PZc+apVIatPdWIdFrvUoMlNpL\n6CLuROV3BGx9OaKsqI5jC9zOCYmfqzZPGYJV3gW3bV9PIbPQjAbQDoeFPAQ3\n8yE0\r\n=/eBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFjj6UHMe0V9xmJGF+tTsyV3OM9VKMl1ya/Dj1Hs/+tQIhAImi1bA8/8y7PHP2ByeGTPjHYLdEhxOGr6Q1DUNJ6PeY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.ba7a1b35.0_1613693589300_0.7646951855953446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.9a566dda.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-0lHUZpdlTE2LS3VAFaLr0muxp+gqUwab78YaOhQqWZQCgYlpklrROikdEUHC/kXN5onK8bnsbUyxVA7+4X/e/g==","shasum":"c9cb1c73394bdc5e4678a89b5479c338911852f1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.9a566dda.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAVNCRA9TVsSAnZWagAAqA8P/2/x5aRHJLP/q38rYzlo\nU4FsGJMAHLkh7gspA1qLIdN2udxl5mTorDOULrGrcONQc5IT5PiDFGIp+Qcv\nR9RQdOxkf7r1z4xhkhmgx2iS23CU6S7Jzrxq9dkknC/95JaQwMeWQnlX6+GY\njLGcet6OG19s3olPmYht4Q0DaLIADLt8HV+trmvSykZqYaVVSX1+MrJxwjo6\noIf8eQq3UaB4ZOspdXXK2cp82PaRcKjOT45TbjIMqZHAmcb0guXzCaePxIOx\n9sPZJTF5TBgFuD3FqnkSWrYsZomhbnA2iYmg+QZu5A4YKU8KbakJjNS6vfSK\nXuzocFpTNYjgHpk8XZqwJxVwvmYbgSn9z51SRKnwAp5IkEyQcIXtY2c+vSCX\nFkIaI9D/tew3KXKkmWl+qIwGHBl/nb+g4RZkik9c3mmE8hBJ2naGXA/hjf+K\nNZnOAR0yt/vDWNNF86M+/kadtfUVi2Gpb+zkQpW/nY0LvdhqdCiAOEmyl7sA\n7dHHqxBfB7n1GXtkmlVEY4xbTmB54pN8NYPi9GmPc/mQS5anV70Ma+hQ0mTt\nLWG6L8C46rfakCXJ/iwTFoZ2nNCJU6hpAJzT7kDS5thYID3TFL2FReKrWBe2\nLamWju8lOmQwX4EU01O3TTNF6wmeKDUsVJWURM9CdO6Oifx62wNBI0qNRAI2\nIaJs\r\n=Qn/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDD85Tem0zbpZ2eexIJ/i88D2ZMCrX0GJ4xqOQ9Avt0pAiEA8df4ZoJ0B6aRLGbH6Mfm8uuSMidm97PE5vf8iz6kdhw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.9a566dda.0_1613759821303_0.49665909414085196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.55addb8c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-FaxQvWqtsrtgmO2bDGI1yZX7i2SkOYWLKTPKmDAt/37UiqJd1ctp5C0390lJJsg5j7RUcW98Wc4OSVxiuzcweA==","shasum":"c2f2c328cc364e57ddf77e5e758e3fbb32ec63e2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.55addb8c.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDU4CRA9TVsSAnZWagAARTUP/1UtVHzFKhsrL5gV0J8h\nTWWbDnc+KrBJxLAVVnuhiF2f4CyP+uvL4ZcPC+D/a4/GGMSF+UmAkj0AW31i\nA6DphG+4cGUJ0Zt6AZV6BnjFN4VQuOIBYsDVh2KxDopZl9yXry+fFczVSg9J\nNQJRa/gBPujCDohvtqDeAzi9o6Et5as3z3WfQtHte7LYtF5OhcSiTcsEUyiJ\nSCSIygOPgkBOIVNwvvgZm3SdFJo8aXKUi9MTQPXB9Jh2Snh+2tYQ8rPl1KL4\nMjPg1JNNmK78A2ENe2KlP56qWePRK2JfOkWPT0dxME8PrYRHAVg6FKdf1FdF\nuafMOUt0QMLqUrJJqzrD2DQMY4m8qp4loklmgyYGUYrzmwsMtGHiznvWnxMU\natGTvThbn4HOef+1x5W96Xrbkt4rcsfuaaDC6n1g+CUkL11sgU9pvjcu1htE\nvwOEMJ9A/Ra995pSi1Yzb203SkaEtDdwSLBJJrFkh1Qumkuq5hCn5bv0/G3b\nLb8OU9+WNjKSixe6wB8TK93n8ECDMJkLpvVblzUb9jukq6XlHVvU3uVexH4f\n9NC9sfLYfApoKVsb/wlnfeDpr+JBMpwwrlwQFlpH/DDdabc7R9AyS+DTDYaZ\nKMv7tDeFYG7CGYSbmeDHsYnDtr+oZwG8XjOU1GNdtvM46GX5Gj4FLGTo6NQ5\nh91L\r\n=WLB7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwyUvW7T/Vn1qQUbyhePiSN7iemBvFkF/zARt9mMuaTAiEAoxYG7mdPoKogriIvxdBfjohrTL7kGpffPu2UBib1zEw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.55addb8c.0_1613772088301_0.2786657733686515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.85dd5e9b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-W8wHCRa0V++K1GP3Ho1j3iEq8gyRxQKjQCa1r8egQ1jZXSBzrbG+H3NUq3F5+W+HYcrEktkw4qhqwfeuCGs4Pg==","shasum":"6df6f7e950cbec2d5cb7c66f374e52a7862056ec","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.85dd5e9b.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGX3CRA9TVsSAnZWagAAq84P/RaJTljw+BwYwspVUX5x\n1IU0QyuOvUlqOqitFt58kpXbyyrOuMQDVw2eone9GxrTVeaMUMi1xRJ28z5G\nUT7Mjcn+Kr/o4bVz2FJqV7eyobbxoGl7HJ++t0xtxbQnyPzE/myoWRdY33Mf\no+JcKlitZy9UAHlZ4FFvZvwDzVo/O8eGEExnjFjRcLK3AgywrSBtaTtQucKI\ndrQpzOF2qQdJlI+2sJV9/qALeVvu0ew1kHbS9YAWh02ymG8HcyYJinTCqce9\n38T3QpwG2ukcKrGAzrPqNVWQOwD/zehxLcZGd1M412ugGqRBZYPj3gvNGwAU\nA/qViLnrKkOf7IhME7zk8agDsAM1yPLc8XndohqH149ivdjsUcW6sV+Guk8l\nfu5KA59/4jTEzNUwgmSQkkGCnkOtax9GQHIyGTUFkz7fqh+XQn6i3JhzDtX+\nuhidtOJwMaQpN3387GvF3h+e+wprisuY9rGWPl1c3orvqyhBVSQB0NfEdOqc\n6m+WST3swvynNmqTnsqAydOYM3ErkSK+tiHqfqq5sYv5/d6Hqqn5aw+FGozD\n8DWKBlgB5IV7ESLsw+Sljxt/Xk5gv3D417Oyxx8u+F5M6+jF/f+fUPU2HXox\nRfjrUO8DLmJs3yRBM/vQdmLa698XazWpJdveUlzWV721q/Wzae/qXLwzkp5B\n8IPc\r\n=xL7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNC9frQqTzHH4+mmH6U0uGkI64XwdolEB/mq3Bkb7OowIhAMv+eR7AgsS+ZUX+zOnJyvzFYs0rEsgwPNXk7EyjF5pg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.85dd5e9b.0_1614046710545_0.2836797907419679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.aa3e078e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-gSMz4MnPeonTCpoJeoOsO1haFaWcDzuZTgEoFaud4QHfTuZtybE9oPWhP9oKfaJ/qi/C14AOaIzcCjVf5ISU8g==","shasum":"63f8f82697fc0f0d5861db132f464c274236327f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.aa3e078e.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTfQCRA9TVsSAnZWagAAo5YP/jvth/6366xw8C7P+Mlw\nwbYahWmYgnBMrxkDj6ObrJJb4MEjKBz0wOvYcT0cm8KzhUcuLw7nosruBguW\nNQoffw78v78CnbfrgK2xD4+XlmGdhbYyINVVnmCjBik/AfmfQ8f3pLunw2gE\nOjwOwSZvb8bahKGHxKAK8BoIzyKMS1DW3bYdXSv5DtZqD4q5kytkH+S0fTjV\nZ/ORTHTzQQbqk+2X/L9foj37p+LJXRpEFHUOFuiUykFw0+XYSfiDxQXtNGcn\n0xtA+hMjn/d97HpXN1XYnXxTcBIOjUJ9Ik3tDTKWZZRoC9Z7TsW+y9EszVky\nqkFwuP5ZBnxxHmw7gCVlsQjY9Md/CT9zWRJgSpGKxlqjMXC0u7Naai6e+Ltw\nFMHaDqYN/Ip5MD9nvucY8YZ/Yq8CKbcrmjtKfO2C9DVYdEUpqbC/jS1xYi1e\nX4cr5MSbS1ldYqn54GvfG+f+p8YbVPo6YSTvKKKTDhgRwkENKs6RQ733CFLo\ndKdayuJnrYD1OZ503ssjUnDY8l4m4X215YhtBimrBdRNUWHCnK0rQSE1pGQ6\nv/UbY9x7F55Iu1miOhonuf9pmfNBlEzY+hNfyDooFggnuUJDEHXLh9AKRZLx\nuvbKnjwUpAT74sHP7rVs4Pm3PoiGuUCJYLvVERI8k1CmEKGIm3q6Usz24xh5\npX2n\r\n=HhwM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0wS4LsUUzp7nrXsyEDbUlPIfLq85lozkL5SBNAPOJPAiEAj6UHPHrhgDTfGBP6WKf7HBqRFVIj7NnPcr2mGVyrIDw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.aa3e078e.0_1614100431907_0.33747802707929186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.dccd254e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-+yJrK1j9oYmbZa7i0VpfkfFPR0jNchfIazpNtZFYA7L5355quCRRlA15euMIrpAFy/YysmewjSzuLPGYZKHYsw==","shasum":"c5f4ab3e5720e326cea5a54d870d2d8d56e051d4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.dccd254e.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOFCRA9TVsSAnZWagAAZb0P/RPXWPCpdag27xFszYlt\nBieERvYhWN0NKSqgaW97FjPrdue2NtTx5fIi4bGC5fVtJRAUubDD45eiEzgf\ndzoNNUEcaaK7MvlWfo+lqZ9RqcQQzkgqf5XB/5L+zMJzNuQo5r1Eirgqy3Lr\npkKq0jk7TZZ0Dl31/jm5JP6nRzKML5DsLXo/Gffimvr109peDbS6bzFRTmpH\n76+u2rMvYLLBN8DcURhHbX6PnsKvoT/JIpqsakepgBq8EezscA1QycLTTx8u\nEs9Tw6vtrFzT8W50USATzk4suYu44V3LDI5y9mgKkJBKlaBMRJiYwtvUJUgE\nETLWfhMZqsL3KIsW9mF1o4FCR2DACzr4RUXLPdz7N11nFFlPmi6nDEzPr1KX\nDeSKk1yefi6lOCrdpaECdqdI825csJRUars98KKRtKj+EUgOKL9laFDN4hnK\nUM7Sv6J7XUQGVy9TZ9xf7oUu032ta2O4OL8IKEyPMS9CKHW3ZLXjpm4eqS//\nfX51icp6u0EHRpw5cgpXn8I6I2srADWiAajgrQdwg5eS/WpwC1FT7z7vSTT/\nhqGA6Y+L5+cbPuUpe+E90jEM8+J+Iv5S+3ZbrFhiysOGgcBKjCD61vwjJ1h4\nddVdzkfgRcMUN2C8lGwIRceTS1/xD0sdJEV9I/8SY3HfUJFh4HN1EcHK32S7\nifZn\r\n=0EeB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8Cw3jxjDNlfhxOEl5bbCcscqhqHW6g0yIXBQqPQgpcQIgJFoFG7HUR0uVMoQXNPF0C2EI6QtV8f2LKWL6RTe2tNQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.dccd254e.0_1614373765235_0.07309965371758631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.7dd1a27d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zu/7oeQJl8OiwMeDIltZ6Zx+NwHk52hcwFRrfsYtvjtRVvyR5SJ7cP4iQz8Lul6qdVN2vNJqg9IfzhKte6++Kg==","shasum":"4817f078eda3d538d41b92b749f2cb8fc54947fe","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.7dd1a27d.0.tgz","fileCount":16,"unpackedSize":411568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWP3CRA9TVsSAnZWagAAKQ4QAJBxMH388Fa5ewpekd9/\nJVTL1dyJKsUl9Ph6Vt3S8nVXLjD47XbWvvuyNE2o9mQme0qt5lEzsBQW6eM5\nGeoVCmVYC6AT5M97w7YgtCR2iXBSh7clteOmSk9dVf0IiHWK7h+4p2XbLlmp\nCscs1/EpCBVJUhX4MCmEpZ0rEg9YvkhxN9PUYW7t/+FQhsSqSHuUN04qwmhO\nd85aKzfV6DbzNMWIy5iCUjB5L2My3BONwKe111dyrUB++mtmXLQsTD0vUqnf\n1Yqj7rsPSj0OR/QxQV4L4O32BtZKwqy2AOh6O5uglTAyFRjRt0x10/xqzES3\nXMs1/FFRIPtLIb914GiWbe+CZbA3BswEEs+4NAhqCwMlo9HGqDWqozWhT6MB\nWfV4KLHikuH/6ic6tnttlFToAaMbY2eMSwuYKB6daOkWK8t1j7rZ9vpAwX0g\nKXWWVZ+/rbCH/TPsf8TMt6hplgwoCYBb01EjAGnrAHSlwR8v1/XzpLZVleNB\nNgXhdIkf3L6gBLovxK7dJSDDoS7JgHeQTHYwXMePon94G+AJP5cysI+40a/z\nNUuPAZ6e+bT0zuEmj3497jOxTbSVJ4QXna8J5J5jYx1hkxukSm9vmaEGyoxI\nGuGcRGSf+MMDWzfjubCsMD+NdVV6IG02EcPy6SQgJ5PNb/rE6x/V1Hw91T/i\nkQAK\r\n=uJO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEskZ54lyw7kGVC7no+Wzb3tKqVitMMJaau57kYV02BEAiAlEuZdQVZK/0qI4Dq/ViOzmOeNdfpqDv6LtGvUQDbjdA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.7dd1a27d.0_1614636023379_0.9310362075214589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.12574572.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Lfa8i08SQwUQ/C6duL/8G4Yy21Aog7iJiedS7fOdlot9oXeY1nEF4duY3KufkPYjtEpSMDJKYIfFZBC3BZ7TYA==","shasum":"c4a3041c134645489965ad1e88f27cc7226f6f8c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.12574572.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPp/6CRA9TVsSAnZWagAAAtAQAKB54kmks4pWEEcotgsZ\nBNx0bm0+IjrYnB+ILA/CxzIrwbJWYxmoHEL40gAaR7f62RVm+Y+LxzAR7M9+\nVdG32V9EFIxDH4fDsQV59D5c4imnAKRtvdGBd9AI7ojeDvpvhU0r9Udphcva\nt9NHSq90KQwOOOMUmad0ilv9HHxYCjzo9JdWb8mBz7XRPQw19ol8o6Jp3CrN\nPFiwNuA5/kRuHesn2IP/ha++BVDW7MgaBvem7dGP6KWNDYGI/yvWniIE4ghW\n3znLw2Le//otg/8U6GJOJJBoJWVZ6ILO0Wqo423sME+Vn0zBuCJ2Dr3ORec4\nGkEH2MqIBFMf2aSvN4JMgJAGZJSubameN4nq/FGkw7mvJG5VjSLLXSAzRlhN\nrGbO5HZMNQVq65p1j1dna9E5HnxffrPVNCOpagVSzcnX59Fb+5TRE7tbGUwb\nTmuvN8bZVu/5iQrQn9Cs6nmphzSv2B2CMRadWbR/+T6kdAIeYwy3CkSeAP3S\nzgvzGCIBe5WsRDn8MrXhh9GK9GRqsdJAoQAgRkeDwUyjot0cC1L5utR35rA9\nUhwzRFOppIEoE6MvIs2+OPJz2pdK78bG0HeBD4C9KF/SXfZ2vba1hdjSMUSL\nuJeRzd46sf8y1R2k4nBnB7Ngix/9PQtkE6umsdz5h4lSJPj1aI1swWBqh05T\nS+fr\r\n=Y2O4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDN1XIVqdNGHdJxBRDKJFIFtj3dFh8gsBA4UknkhFXfQAiA6pJRyO1NtDkUyG7qKXGNKd+JxUygzdvD0gpBsqi62RA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.12574572.0_1614716921961_0.2870204655267439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.1109a3d3.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-NRYX9m7DZo5L55iqGOcEMhq6owsbBsRLK6hSSlwMa50dTGea8J5cwhDJIzzOrhMDgEmj+Z7Yp+8XpSN1PCSPSw==","shasum":"44b8c095988acca23c9ea94589b69a5a0a27e836","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.1109a3d3.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqELCRA9TVsSAnZWagAA58YQAKMGbUpc0fYWiOLg0YU1\nUG2+Llqq9eTe/bpF60me7FbtcGEAGsPhGenC+NSh7SNStI9EmohcsHyJkIIo\nZ185TbkGqlbwKJ6NKM1LvUJL67m32j7GK8uLvrBZ6tOjG7WqZoJ42ct6pE1S\nyUayWNtwawb8ukEjHyWFpwJiAKiysrYd5QiIyIcybJl6b1JId9ewK/49KHsc\n2djkA5lBhJCJ0I8bYvSYKzFRWCJSbg3T16th0Ld0VgAJBYv8/E5HBeNy0d//\nbeVZNb9VsLiMXe/kRlW92vQxCgUbmaQR0VFkYUX2iVRz1c82Xyj7vlDr15iu\nU/GBNRyz8x2Sy65gCK+IjUwSUOTVyCcoMYe2F5kgWh4YHhwvrrpNjdz+Zf2A\nwR6uZxx4Pc6d0toX+ACjHlAIP9v+kYZsx1qABe+zLmOC5UsOCGfYwHFeJ29c\nANydHzqf8zHQTWl5fZdGTJMmjuPtjzQ+Qwkcr6+NvSSUCTVe+i9x6d3GnjSf\noOt297LSnUBWCRGh+s3i+5nWeYb7mrUPb8400aziCDoLXblSVJSR4q+1lKOb\n+C6tbzCsAbV0l+/9Vi+6IlCpj83/V2Xo1sMyhVeqh51v7IquY3n/+PGCBXLa\nLSbb0NZDxA42IcjH5PZPPaoxEACfCbO2Jj9myhXOpQNYIV/pUtgqimPkEX8T\nSdo5\r\n=okG2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcBykcB5HTeyYk3pCG764bVM/uMqN5mIzWMLUPGG/qbwIgAv7MbFXSyl+xfRrEj8ydvqLk3yTpYLXI/lBNAUjwfHk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.1109a3d3.0_1614717195470_0.3023871743942166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b9cd8739.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-SN54AIbd3kybkO0/AWAgHG5KfZ7XEs5vX69XlsQt1/OL37gGbI61yoXLUTXhfs+bddR+WyaPzeMHu+DShw6oEw==","shasum":"32d1e9c376e22b4d3c2fe82030e56c0921c84079","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b9cd8739.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8s2CRA9TVsSAnZWagAAmDIQAJE3KsYualLBihM6w8PE\nFk5ebquYbASqiyjIQb8gE5fDRuW9F3IAqOEJfVw9p13WzleR97elVQLYpNa1\nb8luDEti4BG+iGMr7jrRrqevmdA0lFa09QR6WM4hnFaQjs8J1tCgo8uKiKjb\nRtgC+Cl56y/Bj9sKFOwvOOyjdOFjfLsKRHRfcRXcupWfC1g9d/9/NMZ/5THz\nTJu69edvzVhXQ+ePOp0iYoS9PTk8vSFmfMu0gEhmzZcQpYEroiSoSU7YZD/8\nFzvbOhFiLXCX5rE4KsNcgkm9FgCDbeeiGMxRVMiNqnmYXVO+JjV/rlKP1rb2\nUVFDVNtDvrSlIJZ/VTQQg3PDcrSFY9zj++QVXh7apcaOWtLvSEvWZiY1CAYO\noN5P+31gpSaqjylDyMMIsbzt3+agtM54MsYvJYmwl6R9Kl4lmhxW0GtAZ2FJ\nsn6HQWzmbMxflP6rZ89P8E+nJ/ybaCj/0qADDEH6QhYqWdrSTi9lpc76I7Q7\nvGv4KrSC0sAGcevUC4+gYhdwqm2Cx6wX8B3bDgm5+2RnLPyRQvg8/z1ktH9r\nzh5LSLUJe5nkL2HJE/NQ5wtuQ/k+wkVcZL6w1s+B7XO+2tyzsVDstUJG7fC/\nxm5qFAPOJ1NZnfXu7f1yqP+RJd0y0wBwHdIE01/3IgycvnPBxazdQ0vrkJYc\n5u+B\r\n=0Jn3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+FAL10gUwmLIE6I9ZMvzB0bJGAqVaVxpUqa2Fr73dvAiBF4INSy85nwXhGVLaZVZgFcAB9fSNLYKa9I6VnBS5Jnw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b9cd8739.0_1614793526176_0.5215873312033936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.71ee796a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-XDZ9gmTGr431JEtFGevnoyRckq/AcVC9uC9cbTN1GFxyMQ3Q+q/H4cbZ5lqTKS+OxK07hGrQ7uBBmUVdf2oMmw==","shasum":"1086ab6575697b4a874b466ed5b4f0ce39e07a5f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.71ee796a.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+0bCRA9TVsSAnZWagAAc4EP/RXvFFjyWo8lRT/Hg3Nq\n0LqgcDG+3kucX7tQQncg/Kav51JqIArEI2mSuM1MpGfzC0WpyIvanD+SUqAb\nSxzSudb3OfGB8UuwaehVdfonGxeJ6cfdCvx9frCes6N1OIVFnrzzaYmfD8wn\nSS6FgGMLi0V5OhcOUCWntDupDLyyCbPAWdUQePvsPH9w4jytJ2qG/Z3tio+b\nkoDqvdGKU8NULtlZIaeyQ8VDmmux5AT5XOsn4q9ijuSPa2ymsHAt3mJEQXor\nCK+J/n105YLXlQUfgbqrHL9mxe4bGH3zBmgSPDjyhM7Abi6qgSF3uqF9muxg\nT1kQ2mBtTQ6GCCHEHTxmCybySm1KMhG5djAx35bpHWJrOYxxJAQy7iGZFbmk\n+r0UBJz6rWzqmKHwNSpxuECQhEr02/pceYuznBrof2O2a8VXyYmTSn9v3l+2\nj8IBcfNqUrpM+Q3sw4wEA8aRzf5gZhso0EJlqVN2y91KV5Py8GHPqzbONcm0\ndh5oiN16oXYnCaUdj5LBVZa1d+acdjcYVNNkqrktJQjcFM5cD3QTjNgJmsUu\nWlQcqWH06/A8KpjpD0pB1LFNg1Bb/ynIElDXohD4rKvvJKhR64rMhdpmEzGA\n8eTHPguRt4JAmv1niVggPr46pK59/ODLdrICNM0HTh85zikzxopp3RHIGe/x\nBRII\r\n=oPGc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrhacLNsTwZF4/uawKo9gIti1uNwcvgwAnsOQl5qLLeAIhAKTyGv+1Q4R/HYKn/5V0XqiuDXnRE0pAlZxoIRuxlzPU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.71ee796a.0_1614802202828_0.9924665262403731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.2be191ed.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-0fIIvCi1rn64Jpk073/+d736Xwd8uGd/j5mhI5g82iOcNA096VOHIG0iSwJi6yScn3SJT0UCYt4TH01RQwnkIg==","shasum":"35c857d685bf4b0886fca18c2de5f7cafbe0f3df","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.2be191ed.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQASsCRA9TVsSAnZWagAAknMP/2QfBTwKxDXR4yFVSXil\nyR24OIBZI2LiSJXl5xzFefJFX1cLyJqz/hrMUXroK0+8kaFPltZvYZ6w/l0N\nTnasvUAsM4J3ZQFdO/ejFBWQywNftCbsvfy/4/WM2LbL08ceeWPXF8IUVEOe\nrPHPmn/Xvjq9g6c/14YIEw8NQGJT905ZpbKDayKjsWRRkSCbq7qEJoEclUF5\nbum9U9zxsHmyt58MJ627Rr3i5m7mHfI5WpfIXivGPEA5hTmp4WynWYNNlUBh\nEeBHDeFu58ufcauGtcZpH6Akqwc2mhxzC0FWcgtHTZXbyV7rgfFb2kD1wrPt\nbzvbpAZcyqwoO3MXf6T9CE10Dz/XqZMHqSLpiwPUXhb339TuCwDfr4IBBAWh\ntEg3k1lMzpVBB6PKmxZQBTKIhGC5PR8sx7M7n6HNyxDS6+kl970+B8reG6ZK\n8UxRFM+pF3Jsqd1Y0seexn3pSEKUZus8cUJYlOv5pP097gPoYzOFnkIjDeDu\n9SoWc7W1qvwvAz6AGsKjEGV8NP5uwf+Kt4I/AegriLLOVJse3mmGfChdKSEf\nULw0XMjUHfHesbT649rNldSDnHxRYCsnYe9KE5Ye0u1C+Ek8xqfKZIFlv94u\ng4k5g90EVCdKigiP3Jc9SnHJ20dBXrUMqt5LFeSZsl/eIRseUVea+5cz1yJf\nCQov\r\n=yeKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3n9Tx1/3CBGoOsAoOnw7zdGZgOKaZOLbnENM9wWC65QIhAKtIHNLSe8tNVsa6pVWfUZYtIyUI3hhgC/70E0kh9T5X"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.2be191ed.0_1614808235775_0.707531174971928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.6dc7b06f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RxwOHjTykochxOm3Y2aMKus53yMJWgMzUBoM/M5JSBnuyeTnlLwTFua5srGKzzQYNnnnHVo9P5GiYdeem2D+PA==","shasum":"9444c2c6628cb8705f856414f1cfb6c758019ed6","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.6dc7b06f.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXl6CRA9TVsSAnZWagAAmmEP/jM4y7qH71WEWo+eqSdm\nObY4puGrsiejzEJ/qyHeRjP6Sg/4Dm6flCkrTgKsv7jEpWS7d6tDixjAx7XI\n/+z81zEvZ2qkAUXV3sMsREXbr3k+exJ0VlyfzRNWwpZ9fkP+VZcTe61NPiTb\nBMqaj4yaKdFB2D66321hUFL1V8WiLaGm5yRMsxyMZEgQZHvaO17VNzZKujF0\nmBT25NZjeZYeSqtUNuHQKpC0aFZ9BlVwpcOMU5SmQEehCHDMD++Y40UsXOVo\nMP3ZrEh+TL4uHAkPauX38wUFjggHPzDrMxoesjCiXTVwyLjEKl0NaDGSKih7\nyc7mTt3r0N2Cti4Lka0dEllbkwacurdLT9fnZElIGJopR1yHD6IcyZIIvyaX\njqZbuVNRyf+N5Tl9hiZBWJ45YdT8h4kTC+A0jHyreQNeIQbc+8+H1kcf/YLf\n/bg6cCr0Nb+2o5ouh7cGRjYQN3RTCJ/myXIB/3zY3uu79t/HptMPs8yoIboJ\nECz1Mp7o9WvxsvLwrEH3X4kswviv8EV3PfZtWd3sI6BT2rP0vL9parnSeofx\nQIIAo6zNRdIHq0dOFfxmj8fTESo2I5I0HLTd7GL0ZcUBx2pNKriKZ9SPZXmJ\nNpMw3A1xchuZPtDurf+HTmiZCd6UVVuiEFgZzG/aatN05cfrQAQzYED7hAUF\nyYrq\r\n=HuX/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYjOmWPqlZvU2R8jpxqTOsS2cmxmuyEDkTme56sSoNmwIhALi1zc+E5Gf+A/cJTNUQO1hk9JHc3ZDJ3cuzFPIODCgi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.6dc7b06f.0_1614903674442_0.7507603313712239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.24fe7ba6.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+/6ILg/tY6CvgQms9FWWwYf6lKblAJBxT89MOL9EstoJn4N+bKyA7ZmCupA1b8uqskc8AbaetwpCySicpx2ftg==","shasum":"2c70c752dea9cdbc0ad3a1782164722cff9b065b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.24fe7ba6.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmm/CRA9TVsSAnZWagAA8hwQAJgEZ/Pki/Azp6xdPzV5\nHolqJU1sMIXMrBROLBYCGph447c5QfuzOgDjs+CPbkiD1+5stxV5NQEYsx/F\nG+HcfnoJoBUZdQ6dEnHq2ilWusyTXYy1OJh6e/DMJtT+D9QYXGE7hH51x52n\niHtmI99cxZleohY5+vBmjLL8MBTbSWrKOrxyGvPKxhRjFuxJwzGGIFkO+7IQ\nLjxfQHi1svJUpZRnh+tubN60K0pUgXLEVNBBG4O+eE6VDaPsTcIF5VqWjVLM\nNBUutKuK1/EJ+XviaCl+itp6+0wGj7McDf75Wv7t5JJOYsrgBH4bum4eQtdp\nZMVpG+bukFJx7PYyPcAdWnpO7v5SsrrcdZ4yND4gUcpUHMnqjnLuMrbwRjff\nXbuNrvj2J0v5lj+g2/uwMsKaeho66oQ5baeor2rcf0F4e7Qf8Yxx7kiiyXJr\nWAtqYP1SkZ5qebSSzDeo37bTH+NFCC/3rRWidqatjBFYlvL4kN8OYbVd2jgU\n5FPl/tG8mnkLaBcg2yH3j38DnnPULrmfVBvoa1Qbw5KWYG7XIu/eAohWFHSf\nv+Gtsx9QKEMorxWF3OAgPK7TJBxl58xnpCuua6Aq/eemvLUai5ThI3q3xzgB\nuxamgNkgB7PjSRU/czNr+pXdLOOYWGa69/0qWx/OB1AnwVLvbl5tQ8b/7V7H\nLbLC\r\n=nEuT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDubEDKM7DUIIwrlbEjJSBnsRXZ7mlBsam9zbHUaN1pyAIgAa7BTiKCp/pV+ehxbphY2LAfH03EH1FrnOKFUFLrWgA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.24fe7ba6.0_1614965183126_0.5393643754534696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.12c477d1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3PaE8gpVf6KUAFPKPH9EmIuCJ9HXWSh11PNsPuQ0nJ3YiatwdbvFIgCfQzMy2XX4zr0dW/4liJQTY/WsFRB6RA==","shasum":"8a3171bdd6bd763f7f11adafcaa27ad237eac037","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.12c477d1.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqO5CRA9TVsSAnZWagAALSMP/jyFjZEq4EVyTFFPyLqM\nwDPhGj2ullolHnsoTuolAT20ZwVi/L4mLTLhK8sbpTRx4U/vkq+7e2rMaI8J\n3YuObtzGkyQN0dSmIUw+OgKy+GAtB4Gre7WoKKCUxp66mtbFLt/Os2fugWhp\nUyMRvgGoNIm0WARC0jmr6/QSZqHX6m3bbUy8jxO+Qgy1ZJZ5Wo5XNcGfGcn1\n5CHEJw4ajZUXzCgXsFe/eLLJQBeDlewy6daiqirmcvBOj5f1gNUA9HXLwaZ0\nG1XKtXqtGOTkC+j+OPDSXYTN0kjU8wVNj0zXlZdQbyX4cZF2oDwpzkPVPvFf\nB+rvYEAXjJvE4gXex+D+C7fWOM74WAp9D8Av0nRJ5B4sbi3Y2rGGSraao7HS\n4ARGv3jbg8CV4ey1a6fIeI8H+eUKtzMueihAVdtDBcRDdjmRdNrXSc6k0eAk\nKAjXj0DviADA1xycbPBuRkw8wzp2/0mwFrt0Jt53t+7Si9YoNPFK7GKM8GQY\nMzsv/J1+dX7FkYpjX+ajXlln7asNf/rEVjvG12sKmMpZagiYU6xfVX7oSxci\nRtC3SjB+vExSUzskHBfvx0XLsoeJ5/TmLo8u9ZA05OkxKeMQTH+KP0jlgAQa\nUTLWu/c9G6gT/8iAxLCtDeqINQAO0Qt++d7w0oGmoMUhmY+wxiraw5mJJGxz\nn8sH\r\n=ygzx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf6Pzqq1AgJhmE3+NurMjZijEMsczOwZ54Tls0H5aJ+QIhAKOvSc8ci222e9U/tNsp2b1xgvtFxgH/zdedfZf/df/p"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.12c477d1.0_1615242168859_0.7353836747390021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.4c38f801.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3Ey8pUEkfFa2/Ru6dsEy6go3bq+5rLexg+mIQgoq7DjH69Q+ZMd9aEDmOEyqYF15aQEWRJGPjc7o2gXuqo88KQ==","shasum":"36a83e86f41ad6960e5565bb98d666b078063856","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.4c38f801.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrIECRA9TVsSAnZWagAA4UIQAJsNPO+i5LPpteeY1mBT\ndTTkiMApB0KKo/jMuefFI01CazIsc2Ar4GymHjJDgNpI0ng2w/4C4TI+96wx\nti3ex2YY2XticQv027hN/C84fOuZ2JzqKGdbVazLXrzx2QoBPAZU9n+1uWw5\n4HcuIl7Wuo4Xji2Dal+XMbXXmWkghN3TR3fyaD3JCT/LethExn1zJxJQMGZN\naZ1s8pc34FMYtEt6wnB2BI4TL9xKN+0/NeD0CnhLiEAXRtKHfLCRZb+XBfIf\ngwJ9ZsAO1bpOXnTpgIfxdbkslerWLTGsyK+1dgjtguakqlKjJgPmhtKp8Q0m\nS7TuUedUr7tfHA5HfXKZA6uvcb/mi6q9qLPFxHYCWePZTuCUT+BYkwzqrmhh\nY7cCkr9Zn9ktV9TjaqZCxb6rVLrMKOdBQUYyGxbQcZ0FyIgNyKVt32HoGdls\n8UJDPKXvBD+SC1pHgkEoTjNV9bs2Fm3wqwvI8VbnpHdhtNw37QCB7E4nSCi9\nY9YxEjgWiut/mBz4lJohvO97BrDrafHfKJqEIaoKKkFml26E52CitUsPP6ZC\nAhjON7/ESOD//7tErVcaXpgACA1kAlJxwdlqAiOmpB3WaPQbwfzqD8W3xLZ7\nhqgryYAd/vmO0X8eb9tGYFt5yqmHuNV2qUYd2Njua2kRgzllfMIJYVz7YPCO\nNf7w\r\n=kN5Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKdSOOjlGY/h7YDlZQxLTv1FAizgMAd1n4h1mAS72JNAiEAy8V5P/I/4JBrJUL9MXAXDJzmk7JVcPPF9zCxXI4PJKo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.4c38f801.0_1615245827717_0.0518272960644548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.8795b83f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-aJekTBuU7YUuz6wj/Iu1hDWIIlvmIVEWqMPwRpE5+bpDvwSgdBWe4r0lEHXxRm4eCShrRWOu8ig4c0B/8ZZFqQ==","shasum":"ffd085655be63a0f8736930e57d2c0ec37b02602","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.8795b83f.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR73lCRA9TVsSAnZWagAAxvAP/jKBhT7PFtI5k+8iL0Ut\nJMWK3rwZI6OZhBPlbs22Ja2uk+jq3NTAPl7UK9jqLz0ayvxCnmJ2lm3WmUY/\nWlqwe2t0FffpdTgGieHbmip1EY0ykVmeLqe/Uo/PWbwmAvLvtgUxSAbKduMA\nQbKlXJ20kVqC2OLiaHjMcGsKqjwX63g7CaERnA9X+vvNPbQYocTdOcuyleru\ndRlpHXOewzx6qZ+9o3D/qP4KH5Q2T9QIEy/wPmpxWSHB6oASV3nWGiFgf9FZ\n5biEoQff2ReiWKGwSk9RovznDqontUkTXTYEKPdsoSWFz98pBCoVEiyrnk0m\n+0kKyrPMCZRbG4Y8IdLNTQMaPhDi9fhEeLL76ik1CC+u5t+c7DyrFFZLowEN\nvxf12UCm4dP59FodGbMZVbZ1vhUrbPNhiVQ08yAkK+TbhkkFEPm6o8Ix1t/v\nS3UacY8uXb5NL8IHLQWhemTIpDXTs7lSif8yLyDXqKTFfRszaaai7Qw/8Agf\n7wGFSnfrUfV34CDOBlyRYoiDk5xFHgS7RbC5LIzMl5YIPK6SPfv+iBHvXwTO\nmDqtEVCmR3X4PJWeSL4uGgaEAan3wbS6sVyJNZ9g/8YZo/herz8mMtthdRX2\neFBMCLAlZEep5G3/kVl1ELO8//60+LNM8wQ4RyFnMEy1v0IQqcZJK5fWufr3\nWkzs\r\n=IPei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3325gdA7tGktzB5kwjuUSUSDTCXBooPG7pu/1ZfDOUgIgAXcKi1WY2bffNHF+bjLi8TW6i8iKY9yjB/GPoKgZ/Ek="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.8795b83f.0_1615314404598_0.8217571206794552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.12b84cb7.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bVyAufi3X5UbQKaT+/MZTSCr3SFhwnM0OEkTC0E1uJTwJ4HeT6bosAySgO8cOndMSm3hg+Sb9LiENw9PUl3VFg==","shasum":"b09c8c1ae7e05bd6c4dac6024f1dc23d61979c23","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.12b84cb7.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBV0CRA9TVsSAnZWagAAejEP/RyBYlxoNbkcqyXj3qYS\nzbYkhwvNaRekYrtRoAyh70lPC68q29IU6zNA47ybOS2oKVKdCRmwNKPil3yT\n5IIq40aEGEG3L95FvG0wA+GwTIKQuStb7/qV+7hNggnKhxOf26KGgOVWUQSG\ndb4OukWbRiz24JQawqxoR5i45nTScwTHMHDRLMkGUIqUVpHNTSkb/qk+AmVC\nNFGEg7b/BptQgcpMHcujT/xL8SvP9MhINF9ZigIWGDOBa/7wwUcTGowvJuYz\n1fCvdU2xjH2c7xK4NZsMc96m/Vxuc8T/ZGg4CIyglPbuEmk0xdHiYMwKgkbr\niJ2QrsgKwkZODgMH4IS22qhfQM+aOK1rHh7SYx97PLn6fOOoXvA6BS2IGcR/\nlgqdM14tAu8pnyYUg+aMHU1VNm0u0BGmF6MXmYvNZ6JuStxnaY+sL/0I+F3U\n+5NNOWWG4p7GNMEXNRH4nglM1LpfaSUFJouBSQzcImW1mJSVSGlV1A2I69oi\nd3RHrsPkIx0vt8WhfX/xNUouHm9Sugc187NzVuqj7/RK76bK/9UcCluslVxH\nEmo0hsWlzqZysjYIGfjyaOd0cQIK10JnIR576V/Xihq0tNu59YJgN9qsLypL\nZEYHvFeqeTyBKxrKjhg/ZTfWRd6xDAMkYW9EncBNjj6f7iOE2teYhofdm2ey\n1hVS\r\n=sRyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHJE5HqRJfeuVzMibMfHEMejvn1G8im9cbfyUFoPyuNQIgKRxjI+MaJDJKGfmeJcfEvztoMIw5SjDWBuK7YR2QzHY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.12b84cb7.0_1615336819977_0.7045595111779039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.6ac6784b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ccsOAw20HByJl3l3uzVcVzv3s8sAUpgw+KkVmCBb+kfkzRZgjmxGcSyk0HjevLk94jsWqHS6WUdZVDy61FoXQA==","shasum":"383c7ba30a61f20dc3f8323aa033fabbb5e9569b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.6ac6784b.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBfPCRA9TVsSAnZWagAAblcP/0D0DXzsyBoQFMTGF0h8\n0n7OuEQEI2T22q1TkPJcH3d6QMyyA9exltO7oBw6gAPCxrOy95ZAVEYPR1Vy\n+svOwZIsQQl3jWLOpDRUT8NH+LwJEkc2CGLG58FglP3yUp1mBOdoKvsNYt3l\nriVTT5OWRB/fnlonyyhScHV1OgOXyv5yKaMel4CmNS482epb7dRO+1jH/8/v\ncmbh5qS36bQyR16Vfvmo91glqNUPa+JS2UvEqbCXT33LrTAIIVO1xBROklaW\n02w1VZT26GSnrFraxXBJBv7eX4R4s8wPaOUGk4ThtAK9AVDIaeiisa3qGsMD\nbpikMbWR+B5Thn5C0OiisZx8o3p/UZd16UOauWy3a8sfeTmGdBcBi5T6Vj5R\nhXdQbLXIb4rCS+9HMV3+xKeSyNao/9u0QPfdyJ0xvC36gbKZBYd0vjtwzCL+\nUUApwZ99DTkfz8NUjuPotG2Lwm5nd92kKxrC4WyvM9ewrAGOgLMPW0NCwRUb\nLiOd8QoO6XkdvD0HGvNQzlWB+Wemi7ymq6bEFLSOgotqVqhJGeznmGn5wK4t\nwNO0goSHdHHIRnKJPe5nhb6fUbjAj1m8z/Ky5Btd2j/1G0uItsUm/Z80lYu1\n9VeTg8rIGb+Reai2unEFpoyI5V7xex5ZRthR5JDwnp5hSbR/ZPqLkG2oUTTH\nTmyI\r\n=SsKp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLl3MNMiBuqtSwz+aEeYOD7HE8gyXdp0PFgUrO7XJ7TAIgTxY7ME/5HWLBpn/5EDgILoPEk4YZ3H4sILMS26MXbPc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.6ac6784b.0_1615337422831_0.4722667864330843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b6d92934.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+0muB0RVZsVzUgyuZ3MKykphk79Q6/DrHllbIVPxBkJ9oy5Wj9yWUQxGl5NwEqDRqFeETllvBXXD09J5JIKkNQ==","shasum":"b4f62edf52cc6dfc970011855e25d2c264cfb0d5","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b6d92934.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUFnCRA9TVsSAnZWagAATOQP/3GEEICD34XKVta6ceSY\nRoqYPJXntk6ILzelKhWUey4CAcGIl/GWvjJRuKjCnTSUP2XpwG8BFFAEyczR\nVDaNPtMCV3BUHPROv7ALpxJPDR7VdnpqzzFEugfcPXWN7pVPa6OD9B5JrvrP\noTEVXXnYclUD7D8X/O5lUlpKO0rGHIQweyC0BSLRG8siXbeeNHM0LIrfCGK/\n28nbwysFmZN8kwwLH+EiT5Je0IUMZOFfeojRnI33dwUCBiFlZt5xw5X6PYiW\nv/XV+LYg6dqqu52MVP+baYwxTmJm5dKg0fNCbLpGmc+hVA4SQhdYeBkljR6m\nD58QCS8DsZV/9apRNGD+5lvwNiW/r43mPQyEgc0Lhem7Rp3+jw7JMTLnUQOq\ns8+uBkeADGFmiBH2JPkZIkC7AAgsdGvE//6zrMR10TYxmgiHtvRI0Ap0SF8u\n7A+NsFo4u4l1F9mXO6hlaCSe2Gh/5m9W/uyGn8av/KXjJE3pQQUQ7Ev2seHr\nfESNX04+MIb2+LB+AmuU14eAermCpuLj1gpEtlavOMt0ksRPSKuQL2xl1RR+\nYWs5CtK4XpoDY0U4MvRsbz0kt1aP7AB1sHFbwIpalA7e5f6q8lX8SbRI4GSv\nZiM1LZzfL52MZaxdrsuGGU/ee5JcDpGep8pVbHFjx6LL0Y8ochiCH82arvj+\n/t8X\r\n=Hrsy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkSLYlYytsz8BalvsGSNhXhnp43PHrzbf2AWPN/aTgGAiB393j8dEWagHhoB+B1AFCbBZfPM7IPoQVi7X6W+Y0WFQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b6d92934.0_1615413606957_0.7398057806425686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.99a55b9e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LDXp2slB3wwChUreDvOuz6tJjCxH+dz+syayrC8fxMFGkLNkokFbnnb+lVR6NLQdFNrMGbwlMKHeUxqHtBAtkg==","shasum":"8a0c701040d948b2581db4f16b969c4ae274f636","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.99a55b9e.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU1OCRA9TVsSAnZWagAAbvQP/2dStghHYg36RLlIFhNJ\nKirbR2jISTgiUIJddlXGG3wW9SpbEksjpfhsiAlEb1AgzpJQoE+T2SsOvySp\nz1rx0ViE+OhWiB2K8gJ+JEbbCw7fC0ABvpWX9Qu6FOJjAUCyGZUDuLWpc1dk\nYcb3nHynV5dsNU39Y4m6mm81Z4EVnwCWhB7xazrvjXPKr45EUXo1/G1Bs2p3\nBbEq/mfThWVQbcW72CL2HkJuWbsmlBi3QIRIK4vSetuPT//zqfmvCItt1GkF\naRYn+biEE0z+0QbCFeyOrOb8cDbe/54M8dL0EdsKFe+fJRnqLfR44Oc7hcoU\nm+PdCTvff73JRtnLfG0WyKltUfq/+kxLGnJzMMFQu5JAXuAh0Ua+pW0yieby\n+7NhjBzj3IJMzpDgQ5uBrbNc7FKIq1MFZV7qM9oJSVWG5EDnr7LmNUFSKhF9\nF5Jr3C/XAmTADyPM4hbowJgvNuoWQO7xUv2lds9EG129mMhyLIgJX/NupREd\nSXiQgg+57zHgW6XbG43KT7KPKOy7tp49Tmt1dOKBx4IamtKj9EbN/fIy3zMZ\no70i6xWztJc+ZW2Wj/nvSxB/nIiVQY7Cz4XNQRTuqbJEH2M+xbq2DyJEn0Ko\nU7tkiRpqUFUA6wikZdXPmNkgYhfgV+XkTjwoWToGVpEpJN4s2fXo9S63KUvw\nHGFe\r\n=fqJr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGroE8DdWWE5Oqe0wSaHDNAsgCKpoaZJe/7Qku7XazJ8AiBMNZRObwayycy5B3IBBis73iK30iCxoAuiyQykMdtNig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.99a55b9e.0_1615416654040_0.3697066962220876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.bb14efb7.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lv1vb61Leuh7fPLZ79ls6KBalBrS7TyVYMyyZRYsrryhr6FSC55dsLuWEVFww9fmUvGC0g2A8wa2tZw3Aboc9g==","shasum":"e092057224ce6b4d9023dd9f74bc54f80472e800","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.bb14efb7.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVf/CRA9TVsSAnZWagAA/j4P/1SPB/vpE/j120/LAf1V\nvrkHZoMh8lrYTO+PgJ8jbA41+s5IoV8Ricv+CDGO3FB236QcQORzaDFnjh/s\ngWypEsY/K5wz4DvBo2sI2hlu/uVlHeNEnKxQEAGJhkiMAXrwskzklTOhRRKz\nqwbcJB5TdoFVKDsji0NGkXJr963fkMXacnb2UsZ4WD1Qc2yjrrR9dQGywGLz\nePXi1G3mDiEtqFb6RmUe1KgVMftHFh8o87Kw1PqgczNdvhaWKLG5yrZ6zzI8\ngL1v4kt47q5ZYxRItDjcnKrd9mD39g3o0urvdrVNaYvfDBEf/DLRuxGrZjFl\n3dhHr/gP7r7rdWaCQvXHwj5/pvB45OiIE8LDpNtt8BMoHgDB1G0dpyFA+5md\nZgg4iCtX/Tk/MKBOP3oZlqaWWIqZepAvf178+3/McGNxiQzGuXG+ORp+RBl5\nEdk2GAC92u7dnSLodFTjF5ZB2omTYrsuhpJ95o+CB3ZYgVVkKNY9W1ORKXA2\nagn/2R5i2FM67LAPIK5pv8FU7xjuF06dt+Zb+VwPvYMSVuywIk/1attP69+K\n96JkL4RMZG0GTWV/KDvM/d29P7HiOS4FUzYhGaQPgss2vLhpBZIumR+4zn7p\nNxsxhH7ZiYoTo57S35NH0j2SrdM5ZDqtO/HuKvsxUKpUJuhAuathS6Asw++W\nuqKE\r\n=9myu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcACh0FW/nh3yHa/jA06buMXb7oDHqOPw3/8pfMY9ewgIgVeQPrhTpBdCqHNhv//Hx2GSruP+EKUtcwa4qC6PeY6Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.bb14efb7.0_1615419390712_0.6357738803807187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.9ecf3bdd.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mdFBFllCGWj2/F1+4y5lSCU0esxHEa5OuAxWrlHC2EE29G0T6+aX772I+NUj48PKE2EhPI5MMe4u9rpINTePDA==","shasum":"589555a05bf79ef90287f0d73239c7eb162b66e1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLACRA9TVsSAnZWagAA1LIP/RslV9Bhf315cMNGSpgC\nj1ofctiMCXRqc5p/ixDWUhPIM0P5xCpjpApU/7uPyMgXRwHSUD1dq7nOvt3Q\nVvs8rfrfyA9DixGL1aeZBrdXRYHL/WK/FWL9yel9TJU/S+39ePZTR3zcz8vJ\n6WhiZabUwB2xXjHBO2cCi+Ff46vWDCqATyB+l7wYG0NesNY2OmgPx2DGEaeL\nDAFidXgsJRHqXMBWiwZgd3ue01WPZZpc+UhEsC1B5Nr8qzHdZoaWMrLG0CGo\niq4GbXj5pKlFPCT6eTO4Lv3jDMae3fomNS/kbgTf7Aufa41WO7psolmAwuQh\nOhWT81WaIn882OYWbr6Tp5sfjI+hT6Dak/0LV+Ng4i7fQlqDlPC5EqbRqJQ4\nwOLU9a/di3MqxMVoWoDZENOijZv1SkoEbpmWp7dl/qkgu74/MnRB1pNsTSPC\nvpRHeAuAVcsu39x7sQ6Z4cLfnCakNdImP3u6qLuC48b9mI8UHCRk72spVjQs\nSibvDd8EGxGGGtqV+YEQ3eQ0u6dTd943Ax2X0lqGWo1xa7/O/0BmTiup2czD\nanoAdqiUJpHyCOpItjz4ee8/3B9IGf9O/43YfP7SYAk3KvxyPtpOqkh+Kemq\niP6YxhrWHx5tT62GjfECGMEQAadHNlcI9nD1L/Ierzg54G+Co+D0+HPyBIRy\nZ3/i\r\n=MJbo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyf0PDqNmgGMkoZuApx7UaM0jW3iIUfgweRDpidfkUcAIgeuKxxO1farp0STZ4R8OOnV16dG2wBZ2vMcubzmK4hyU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.9ecf3bdd.0_1615422144398_0.3004361780717877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.7c0e02fd.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xrllK1zuskgS7yFC/5l2i+lg3Tf4nnbl2mPWDw9dcJK5ruRUNfPaOcnhRHiBFgQp00hJteVd9BbGFdbafhEndg==","shasum":"201de8eb60cbfa3ebb5daa1e0b1dcab7a3be9139","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.7c0e02fd.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZXCRA9TVsSAnZWagAAW/cP/0/VIcW46TIr+pEzWzDC\n9UMFK1q7bcFdaF4D7gtX3jqVvocGPB3W0M6E/FiDcEEoSHknyojctxRwRQ11\nuYHzhUKCE+jlQ5zu+3KwIpchfUxf4BAo+jSaephMRgRKGLsXdH/5vHsf4kll\nMk5QxXqv4VWJhNomNvQY8qfcqteN2PmprEkHFyZcDMxgiGKeCdhoT7eHWJU9\n9SC1FnJ26e8kgFj4cJfsOb04j067sC3h0rpcKLuNj6q86ErQALL+R64lUal3\nl4gxSXZeA8N0nALpEiLPTZK1t+goZPF//xLiJnM9K2ET1crHEk4CLJkXwluV\niWtHrHDEV4iL6Q3515nkgk7DpZOL+fFBQ0VNJlqOZT8w/8AVhV5WgD6lYkTz\n0E17PMcXetXKFjRvjORXP/xMum26ISMyGRPj1CjuV804ZcHf4+hYIZpAqhjg\nPhCQngd79pSWHp20qiE6ZMAMUVATJFapVFs/shT+HsKgMdd/yHI/8CJcTfFs\n6eVLJylkEnFMb8rbngu/gseySV6iXRpMXjgWvjlplhq1NuELSs6yg5DTsMPM\n7rThDCLeJo7QPPvg6akAyJZReHj2CvDU6MbJQULvhfhs8LAN6tvaoLK4dRE2\nKAbPfxrWnToU9j4DBJaCw8hnjSb0a4S79tuNodlV+e/mF/tkhX7nwLd15RCN\nGqFB\r\n=9CPw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/cJVgp4Vde08Fsa6NHthdHlR9Yr9gKseOnIwFm2J8lAIgfAxKTjvyQ8J09ZNucJ0+JpXkjoJOAFwlJqw/qShhnrA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.7c0e02fd.0_1615427158683_0.5585080369935638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.2d6d59cc.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sNQd09b+ouv16+t3PuHGGhe1mwJcM+ORf5EfTtH3DnMIGDHiW11MkaL/b5aISAJFPQ78dDLaXNXiKsVlMS9N8Q==","shasum":"3366e07c6ae4406abc2bc1a29db7adb7407ffced","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.2d6d59cc.0.tgz","fileCount":16,"unpackedSize":411586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmFQCRA9TVsSAnZWagAAIBUP/iiRH9zmSrEad9NPzGZI\nW5uh10NTFioKcmvsRDeuITOFB33gx70idyXIdC4O8/LtgSco6cWSBYvULbs4\nMm6YdJmWmp+IvEHC5ytoqQP5IOfRTTj6Fw0M5xikKWa3bDlj6GhyGMF8fy88\nQ2kA9Lb3CnJqed3NbXEOF07bS40ZRM/1p7H+LbtAJwdD/zZPSEmUYeECG428\nPuLFS1MOzLlOCZ+6lfF2xffsr5I+xPXQKbvcrAk9y+2J5t5HjWavSNVOR7Nn\nGb8Yl82jUlJUPqNpxred2ETqHSetiQhrmUKsEzATg119o4HGgjMZfL8pmEBz\nKndEK0U8pN2jjiqW9SHdv/7LW1nkLlVI7D4BWZ3aRZA2C1KzfBN0c1Ppfjbu\nqd7zttuGYu8COjjqXZ5YMXTvIlSYutA0eegdrMjSuMTiRZ/MKK3RgmngedA4\nlRaO7AAwUisnC4laVJlCp9fODiVxyjERrUIBlFb2LSe6PhaMfQCzZ0ojHL2Y\nFF3X+etaLbKtwljQBd/BRM8J9K6Sc+2N0pPiG4q2xbl2qkBJfBt6FIYo+VWP\nX1+1HqMSY0JG/KPBhWII0nbEef1sP0rVongJb03Um6hJT9B/3Ffrk/lPSxmc\ntxZGqMNp/3HVhZXXOy9d3e3vCXqObK4H6QYMGDjeXgvfzQ338gaFjp3d8DSS\ncRF9\r\n=ZvTh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDwlLUj4jyvrlQAvXxNax/YFTDcxD5n7RrvT6IJcw+twIhAIcKHTmopI0xPoGlMgv/cjiXuj2F71Y/1H1liLgmTiTM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.2d6d59cc.0_1615487312051_0.259496993555002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.0138863c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-chPJHsiGFQPvR5tzWqcEcKVfubuKNXUp9QeGbrMZSBj3Yx3yX++0vEw+5X69yuGCuJ1NVfQ5tZf9DffgUZHNvQ==","shasum":"82b4e880d3e59804f267e8dc7aca7cfdc630baa7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.0138863c.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmL/CRA9TVsSAnZWagAA1zsQAIrvbXHOjO57+bDBVBe4\nopYgPae1GzToGag9rZYKf6a0J9y9xh5AMMZ+MR/52tvOlBAvhfdcENX3k8gK\nagLTQmOj9imRS9j4LA/KmL+KE/SG1P31M+YGDGfBqATirIxc84z3soRfPX3c\nJjl6Ze3YmqE2ILG+U4QTFYYXPZ2aTU/tn6/U/wpxlctUHWKr9iY7aTkRPrHb\nXybOtQ08/4BX1EiAQk9R5kGO2w9f9sGetdEFWhAG37hBN/guequU3GEUppTO\nXJsw74RdXzkvHac4ATlKo89fWac9/h92G3zb0uWhV3IbhZD9LRyzMmY++Tl4\npTOVkHZgGO0vx+WqD87dJq3KMxJcd9DHVuWccZeJsSadTEWUKxO5cYUvba0f\n2t5kMJpWc68KxMyMuihwJs4yYqOu989ftl8g5h9Y04OWYskpzg7W4DzxpqEC\nWZGvFiHdcn7+2/A+ItVmf83QbaHUfq07C6ROQWv7leUiuTmKkCj6a97ZrhRe\nl+mqdx9KS7L8ywvHgCGrp/5y5ybob4kiRdkpWmVFuu3vU8ZWvoj4BmZIH6Qd\nk7etd7jHojX3z3zetNk+yPvXOL2/53wL9Vpm6r+GWpSPgfC5ds+i/fTBu/JL\noMxTz/yDTrmx0Bx3VLgAwo7oSp/amjbdIISo8CzL629Nh9IUkMPrFB4g05Oa\nL1qd\r\n=QEQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcy0kgdwSR9/XUo2CRQ6BcJgooXZP5uNiMSadxyNJ8rAiBprcXf6terDdcKTvmvI/gBa4Aa5zKceedeMYLhKX450Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.0138863c.0_1615487743445_0.4636096848581006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.926f5bad.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PFP/nxHNVAz/WVpb4rvDm2bRgFmC0xMc2FfZm9YKN+47ZPUNWXVwPLJjWBCXknUEbaN7zRcnu7GorsGQyZdW0w==","shasum":"e1a4711e543be8b07354104abbda4d9196bd2137","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.926f5bad.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnr5CRA9TVsSAnZWagAAXm0P+gJ3P38QunErb32mWqV3\nsgOwKZRa3VMn4zXRvVOrbut8TUk5/FOEBusYZ9KgWe8VW23tyEbNXOAxX936\nURkaFSshN2q8J7qe+Wk5RnXnoqPMMXnhh5rD3MnGwGHIyaK0AaIq9C2QRRmh\nWmn7FQUOrnHTYE64bbWPA6k8zJG2ZqwOI1AHyiaOlUmuXPz2nXsqd96U5Lzj\njui496ugsFSkXjUIG3DXk9kjwAm3kLJlekKytrT8rTJC+Lx/fhXABeITnABn\nv7GMInpAfTG5Bb6FXGThwBW67Rn/XfWwmSeucRFkfQOxBGEr7nAC5Ld39t9m\nnPP2L3+ItuzwQuhEMwgDAzH9xJu77ozfkbl4AE5KKFkbFOhDZCI1wSSreXNC\nDtnV+7simGX0l8EbsesJZ3Bvvdj1ugTk4ezamjaLi+ugixRFXonFgT+ZeIJd\nGBMDj6G3Mjwq/ifg07TXp8aCC9aPqa3CdYPjsScYEz5njq3TGpQDg1oqH7IC\nx+jwdnR5R79Md8NKRr1uCaWZ6hwLyXPJ70FvSswTlCLHzAgCRSxfwewyL5N2\nn7zIUZIA1W6dqBkKXEIGvpGE9hHhp5xXFcyhHa0w+VUZPkVGV9JhNkfJun8P\nHWI9zhiUma3GfYsi0lU/LTTc7JNhrQud1njsBolcrrKTnqgDSXqq1nJu9Ssg\n6dFI\r\n=FqAk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvqlkKRVZJpD9cf67ZSc4klSoZF5urFRA/XdXMUx5+2AiA2jVwJioW5xIY2EooNio5stVD2l/9hZXk1vwNI8yjndw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.926f5bad.0_1615493880609_0.8367102994399818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.520290a9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HjPqtcMAOTniDIvtZ8JLmyDQmR9tMeTDYCo+sYFbO6jyuvTlnW8YqDwBMhXcf3zUoqy7qouYbIESMSIj/TCYDw==","shasum":"93aa0183984a4d9c5f8b338fcd79b88446b5570a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.520290a9.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplDCRA9TVsSAnZWagAADgsQAKFGxJ0Fg/fWIS7qk+im\nDYDs7NbvB6WVgJfJ1PoRCtE9u/g5o09hSZRbCX3BbLNkitYSruJBlqNZkvEc\nSXN9O3DpA/3clyaFXmur8zlP9FUYFy6h3++HlE4Wa7PXIpwAYw/S/aYayslm\nCOBDf5EPIBoVW/JiKnmsqTq+PRrUT7ViEf8dN3ErqGsKlD3EV/yFsdvVMHUp\nMoAM2d8x/sCp0ayFmWhuZnGj0HRPWq7LV+yEmoPEnVkitqzjFU6/UlweF3Rx\neu3BZk2kzh2oO8UUybsNS37CM8yxiZ93cZnoUYwzs+Sg5qCXJ4YOVwLoXLXi\nEYMYcr7gzA8IBcVD9Rg5W9EXY7p4CD98m+pDzD5BrBl7l1hleJEs5z7NdTG0\nGuE+gtyeXF5y6cZwLW2j+9eAG4z33irua3IGWHZ5LdfBzl3ySszPLaGm83jL\nN//HuKFGGzbItOwljLBTBCWwqcD0geiXrOFQ2US2GBU4FRjWW4LDjHpmwRNg\nJtQm5lPOibsLZQo7IeUVl5ekEYiEpR/2GZh+4vDSiXvyFE9q1ki0yOoOgM76\n0x0d1MP6Bj4E441TEOu2PNlOM/sbqSmEbFjHuzc+KAYn/5gtPVbVfbr5ecI+\nwMQ1al1/0E+8oKODz3jRAjRsLPdUflgxO6JcdBN/e3urzWsGESyQO5n1+rvG\nPniM\r\n=n+dU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm5fSjkmhLRHc3PvAcn8LcfF8WpNT1bkWx1odQ2uuhJgIgKFkHHPKrXVOr6LeQxp2R/ONq1BJAsP1hW2Fr6A02upU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.520290a9.0_1615501635229_0.7097085174133757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.9ec431d1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LZaVEnAwlR0KZrGDl3Q/tUXaSGOFMJYTy6ahnGk0kUPxUDccDJ5t1ig8UFy2mhLzrYNQl7XMfRQ1YYCIcqAPFA==","shasum":"f91a7f11de649089b5e8b78682b3e11d4098c0eb","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.9ec431d1.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSppGCRA9TVsSAnZWagAAutAP/RWV+rvleZXOBKrLdXe3\nlbCs3J3qELl7/vh0O8dWBEiR3EatvE8H0PKAm/RFEpNWxuYjWpmKi3NNTwnT\nI3yLVpUvDBL+Re7vrtGm528WV1s7Y+uHoByTLtT+ee05Xygkfdk+eWxRxNB0\nb2zIt8VkKOwhii/giIWFBaPu+3IWQUy1JrAfhO94enMn3aMLDzE40LUAWWTQ\nP4fAPl6jXtKyBUT9GCQAMw1NcKenQvpqtAP0/tbFYaBLpMO6lTXAfqsdOWwq\nw4Y59GYEIaiNeK18y3hjkrYNMF3rdn164CpDN7OOpPWGKXQn6Cee7G7pFLji\n3GL3ojv+/N+3IO/i7F1NN3I/Ax6c2RdpQ5BVIPmeecnulBEup/zgQfvksx+Q\nTvBEKA2Qc34yVILTImC0F72nv6pkf78y3mHwy7pXTy+kCclIbGELX4el4t8V\n88R/5pghP71yn8XQTL3Ma8U311B/RVA1YUY94i0PAsy2fnqlRPU2R31xi9ht\nxkgZUzNoHm23pABJmvBl07Z9FLmltnEZVfIcMX2gdwa8mZpRbb5NHn7XzTTK\n2Idp47R/DCypAaKny3qPMOEcdQXNC6+KW+E0PYJs85RhoJ3sbt4tkhecvdfb\nR/PrFEkOKtvY2zoOu0ufSHf6W6kjMqeoIrHoZEf9RNtQgzHSz9ggszuHl521\n78XS\r\n=B9v9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcjg1Raxg+a+RJBKHHEry7tchqayub8odmki9tVXGRUwIgVYKntAaLJi9KMfLXspsz1W23XykOGAdOyLbazEBIrrA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.9ec431d1.0_1615501893929_0.31699405255917834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.4246c082.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n0WoW6FIHWtQmoZVXMse4p0EUCEf8mKsRVa9h7b66uwMmz/Rz0N2jgFaZxNrPp5ePZeRVsBnUBLMViwJLxsXxQ==","shasum":"9289a9f86f394707aa6ac3801317394603bd5555","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.4246c082.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpvpCRA9TVsSAnZWagAAESEQAKKSUKNj3Iz0VhpcUpns\nv58vDDYmcEBdrNp080LIJe/Zhn1E5h93/aIicYBYqjJyOwJnhGHilqjHfoHj\niWbi4qXgp62a6qF0i5+pY0jX91OODZewEs1QpOx9rrmbtU4MSx3mGF8ikBv6\nKoxC1Q4VQwUY/pGvAN8deeksXHW54zGxEew99+UtqRJe5Oe2vGH7Jz5btjkZ\npPGHES8s3o8UPta4YMkrteJG8nQz1+Uj0BijtqP1AJUx1DP+POzLcJs/dcE2\nnT+P1vRBL007n+9gZAsRQX/Dwv2xDW5kMJpFqQ5N/loq7CjyNlGor7+urj+1\nPFJ4govLRoDTK349n1hp4tq5XkIjUoA2ur9piIArDA8Uqw3tAlwKXEBTLeuY\nzjh6lzazDY9c+2hNl0WstWVyvUka5sxjVAba0ipsUVDeW6RYwxISX3U91Gle\n9iNmZ694Sny8k6S1bnb2mzgrL/S72PmeklbvM0c5rLzuO4dfVYcWP9NAv4BB\nWWyOpeppYEKwNzjSGQtQxGMJjVBlfLSuGGksa3w2ZiZztb+o97qrbOnYja2q\nPoKr+o3DaFh/6mfkYPcUpsHSLuTV1UzZiKRRKpyDNdBsmn/Oi+5qoW5nWLL5\nN0CA6kkNhckxlk/0NqFgHHxsTHGXe/Frb4FkPYKs4bVsB//BOw8hf51NGoDi\nF9p8\r\n=U/bT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClosrDfKgcIKmjXvCcJXzsZ4BWdWGTLgds2PVdZWUOSAIgdM6JExK4JQoE6otLcXkeOM0oQeqrnAFLyqChngCPkp4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.4246c082.0_1615502312502_0.02333050350193866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.2d736253.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-m93cVj05oQifnoT+QaEq5eT6J+Mcy/fNsW5VmX3HD7Be/+6gUUvDuB4NpeK3i855A9NsBeRWLuIjHBsGwkaUYw==","shasum":"923266b13500d7139c29a700626b42ed8dfd7561","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.2d736253.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+EXCRA9TVsSAnZWagAAMn4QAJBSw5sUnlg2tVTkUB0q\niwBYOCarnIv3RsR5yH/xBhLWrIJxPBWEuhpN7mhhVqzMELAlvscnONWQ21rX\nE+P2YYEbIWWuCKIAwq2TSKT4lriTQcxrgkteiysxAmlWOiIgtpiMsENwJU62\nHTSYr5i8utxJkincpWesMoombe3gI195i+qo3iuavOLInsngCD5zjGp2U8Ed\n4Rv4o+ghHlrAWjyjM4HUtybQAq4Rijiy/6tVo9N3YiW0ysY7p6G6zeCM+5Xd\nIZU3xv5hpyb5EJHz2Hg6GCXu75bBMLFyPni68SzchomhGrcBgk+rg3fmpjyK\nqb0PBU6PJd/j6zcuebtFtElNeqOgLitREJBWX49cfeyzSTp4icDju6uh9php\nLYi8z16kXixWdhz6O8P3LVl86wkXmM4k4LrZASbw8pD1PdUowHeHK4yT2zw1\n9BDYK88UFXjyu2lcx/RsMDPErXJ7WKzFA4kxcXSHol8aYzi1FOCkuPhKWIrz\nvzbTBgfkcRfWPKUrl4WEbjPU94Px+PJid2iSBdbLlpQdpIiHZjbuIgNv11UK\niHk7aKBQ75zleqZUqRTjJJ7j0sgWv5WBt4AQLiXbM3CC+McuK5X/0ZqRPDlx\nr/lb4Nt6glAKpkkKDtB7z+IKkDFb5TfOFYhq40e441kujuO4fMKUHYiCQfyJ\n8LRu\r\n=FV1C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8GBVNCVcBWHHSmAz+SdbSHbudzE4lUj3YfnMzl1eICwIga0mUxmeDkBZmA2Anb4GKOby803buxYFgDTomTIZMids="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.2d736253.0_1615847703229_0.7398657159790056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.7033124d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oA9OXlZl3lFRbZh0Fw3zreyTFUG9besyYlFZaQjfl2F1fmLGPMdfOUDtluJa03fQ0tZrfR1B9yqUCNwNYxl4Fg==","shasum":"d06612ac22b627d26fec6af9620550a51563d97f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.7033124d.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPq+CRA9TVsSAnZWagAANAsP/RITcpJBSZTMhz0OdT0d\n1TxrBYX29wQUkb+npKHE1eriAJF1Swm2MkIusnubiU9RNoXA+wicxCw9+PXy\nHiwFbpXOPpvJvAxnwwRtB07y1L2m48n0diah5BTIJTKv5XYEmYjAsrL4T/jy\nXFfQtQxWxKFS40jcaIB7RjIStGHn0XRfOLZQ0izKcKvThu09XxJSc7DoPYWu\nacmveM2m7wHKyipUqRV6JfSMdelO73SZ0kLxS7/vlUge4kldQIrzuIN7fLWH\nYSzckTC+T1yPT5LU2amE1GqeI5IAXkt5L+3rVY9cXCGgy3CxbYUQzHcQcL2h\nhv3hGvyFZGTC/FjgX4Ni81Mym6SdPmIQnEBb+0fOcWBXYbV2LnqnvTpuCPuA\nAaFUekDavGEYNczf0JakTfaHncwImDQUZEUxQXMF/kQBQRs7NwclCTbMYIy6\naujOPWc5v+R4YD0IUgjxp8/Pm5mirLaGEkIvMCsQ+zeZbYzCFJawIJtuHxjR\njmuZJOxkQz2o9VI9oYGVkFdF+bQvXlobDuKs/wCsiZZlqrjMzNeAW5QfMXp4\nA6Ejsg7si4ioWo1dNVQI3dmyI4rSKQPVPsr3VjqPTFOuWjNM3ov/e6nR7xKC\nbRbd5TIVjL8LvT/qbUYiaFbpLzoIObK3iGOX3JXV+4RFADtt5Zj9m93VMJ93\nekzp\r\n=GEjv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt/FGwlSJSDxjLvZdzqZQqbyl0Pa93HV7i9NaVEABoqQIgeI0eKSpQESoWV56uaZzlHYDZP45yqH8s2XycGusdxak="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.7033124d.0_1615919806110_0.01560354774061068"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.6c0ee901.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ccZHrAEFeaO5Pg1klq7RIxBnJbPDTQTC+wv7AG5Q6QhoahCgAdEJfGlAQHu7fWbs3NZcJZBLRaPV672sioJtXg==","shasum":"7db4f58c2bca3de2dc6be3255698f5f085951dd4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.6c0ee901.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTNVCRA9TVsSAnZWagAARLgP/2Tln15suw+YwMTYmaQP\ne2+uWkmnNLGTJbEj86qnlNWlmBWF1p3gpn+Vynw/t1kO+V5q000L4tniiymK\n/GeuxgxFTs53tsflk4KHkJMmdPeyuzxnyUoKCA8wxs21+zm/QviGm/WN5vBl\nSpRheCr7rXKLHPcTeD4ksxGy1uo8jSKJbzeXQzEeMBv/lwfYKnqU3fRndguc\nE9c9ESAHuPKbkTPVF8Q2GXO29/J7k2nN/US2mv+yg8rYVauKxFi3muyxCGNl\naXu1MpDXImc+w3JQ3DZmqLwE+QFA9h35usw5d/jhs+zZB6TVwTk+lJKT9UHQ\nM43GPgp9jZQCZbf4hhXS4ZFVKzX6tH/bKNvSJFC2r3Qx+aLA8EcqYoboDq3t\nimsNALJU+d6fFwF1pbrl4GKt+IGyZ275WzvON84qKpb53VR/KQ/MAmeBbG6d\nMPzpx8KGaNECrgSo+v0YrSApu6fLC+dA1aiQ3zA8GmfwE6RNaaQKdl3WPNnS\n9ZTYx3eR2GE3s4P74JLqoG7wdjRkM6sjBYOxdo2AQC/6Wfqf/3nTQSKXpWK6\n9DR/c+NQQlCjNxRLRvZ+TxnvLkyHHa04aqP7xQs7WUfAnhF0sdF1E3hj12wi\nSzP6MpMw26KHkTj/DsiPKLnB+dd3BcnrIbWy3KhcwJfPOngjoU8x6cHIb+tX\nWyHs\r\n=F8AY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+WpPh61vH2Vn7BbrFqgPGNjoOMd/c7AMlW1wVYkDNEQIhAJPLLyZHwMlCVQnD8Fs71hcMXVI2/1kh6CeaKg9HFRiI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.6c0ee901.0_1615934293157_0.10039664810058446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.7f0d605e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yciJIkJOU4Runm6vkvsFN07ZhLkJUzHG5Aqv56Avw8CkkCqE+Ok/i+vTmBGJzaECB+mUxZHJ+JhhcYZNIn5YDw==","shasum":"c54b2b41e5f791523effc4d83584f47f5b2b46c2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.7f0d605e.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSECRA9TVsSAnZWagAAScEQAIBMew0kfMrXbSn70bde\n4wGYRVr+bxYAujgVmgrEq0aNkwfNu/gX7G/4WQX80m/ZAD5zpvaEvlO8qmGu\n+6qot6UKlhosuNvr5FYC03bjsrVUey1067hFBovNWw+7wl9DlcG3+JFecKKe\nImxWFh9n37QvvPyTBrwNVAPAKrXkkBsVGpCqiDMa+Z/0RLIMsCuY6+JztZB/\nMg6MOsPRub5XtvhNQmAsTS77kNZrwNAQ38rfyorL5HpBWwIj30HJCPgVtvPI\nmlqmw8XOsND2fsaXhp5og2lYrSWW93PzWQz9U6/VrN34oYxS4PcXUJGGcWWh\nkkE+J0jLjDeYFz3ZNY337yFHw5j/kmtoUaevV1NcLlvOIf/FZ/cbn+mRLu80\nCtAnbuGo3ZVZv1+YCftZ+JC5hxMVv5LhgxInc5EPzG5b9BMuJxu7yIPAkcOZ\n6fNdalzp5C3DxvlKJMDFzV6nE4yFor8iaAfCBrdLRxohFLw6Q4IBO6SoGm+K\nEq8sCi4jXgn3uMZzXPqeSNmAAC28e7BXb68emwh3H13+Z6CG9lVcZNpt/ZPH\nlhuiONSW2He5tqAmB71niROKOOkcYS1g+prfXBrEU0GKJ4XpfBfTG1yi3zwk\n6Z7juHAHOUM8mj3/F9QoiZtbmFj9tj3OAvhIGwdXbuuGLDFEeg2hb78/hOMR\n5zkh\r\n=HwPQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOp1on3QIB4qSLEYVxmAln61xIwoZhVhW+9y1IQzLszAIhAMXaYOxEAD0F6AU2tDQan8llNDwkOPyU768J66SPUCcm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.7f0d605e.0_1616004227638_0.9396114246257954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.572107b5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xx7OG67oem/fuj67d9DeplntA/o4TuiLE2nrMUVJtmRGctI7DsQx00U/SGtTtDDG/js5yUbXOZd79fBiZbu6dA==","shasum":"e7984a648e93b55b1c9215143058f906d4032ec9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.572107b5.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+f+CRA9TVsSAnZWagAAPZ4P/0aanece9IpF4nqixiGn\neaZuJXefcA2DTTdJ4E41N6mV+yoncBd3n3x+0djkc/uS7wWLA2RRwfvrQYwX\nCYgXYfWzSsok8gkSedHbyMaSQkhBwtk4B1WYpjIzXvBu9e9N8rViDkSDKp/l\nwVIu0ieUE8BeYvNB4dI3TVgu4zlZatFloYIympueYPul5hc0Ulk8OBCQfkIC\nL68jcga4MWyM+lPG6zFSiF6esOMO3WBETkyxmfBVvMdR3nKKxym9cLMp9won\nxs5Y5JPIpZsqAxQDWUOaWOHg0nA5mOmzShg6la3WwUeuHdEQFQ/aXF9NY9zK\n6jw3aqo5ATRXpFrkgXr/UReZr1ZcfCHJiFRBLhS0Zou1W1Nmr8DeLoLSICMp\n3d6KPPYeB/EowHIIWEia09xW+p7HyZmgixOCl0oJtlC/qM9Eshnr5eTpoXHx\neLVp6S4T/pBF23dcOtNh+wSjQKNBpa/9R1Avq8EgwK+/Gj+beKZV+TbuVKZu\n8MBRfUjyOj+Z9E4+bxoL9I5GUIkNPLFalrF2rARg5seoGADdm3vsXtMhInsM\nJLnavEG2cvY37PGYpCc7Gb+2IyHz+T9YVSwD57xMFXtCDYT4dOKyzXM0IO7f\ni5XleVGJXawhfIZYrJbq5P0yDLgiltnh6A14qajIChqtheR2k39DwDjY4/I3\nXjyJ\r\n=dk03\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRwXh5f6y+5TQBFl552UODwVfqo59ws5qwQKoYtK3jJAIhAM7BpYSmw7Cj/WXQ6gfydBvut+VYpg9jeQilF/0eRf+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-elevation-overlay_0.21.0-canary.572107b5.0_1616111613473_0.45540239236648206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b7b220b1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qyOQG78I8hU4VhwIhPHKb/bogdDQj9Q28OPTrNMnrs/vhbtNvkZttJ89fuMHQ9n/EFnDfQGK12f5v8C7tZ5Q4A==","shasum":"c2198183fcb6d4386cafb4988dd4e24b7c4cb887","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b7b220b1.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4ACRA9TVsSAnZWagAAudoP/21ytgCxtRrpus5X5qbz\nZlkweD1IqcyGWE9ZP30VFXZIwoKuQ6Vgl3SFbdjP0TAvCFVI3pbf+eTc1a0K\n88q+8V6LFCxc7B79OflDUITWso8czhNMRK31sq9yRAVAEnZrEUfgIRe2qG8e\nMAYU10h29x1m158UllhOvOBLKllMsm8SAyVbIWeg0X0nw/Vq9VP+MsoJbkeb\nYwqempCugxZEkRzWjdWzkQbgEyka1C1XPlJqjt/5wRraKxJQAtQiq9L2DXbh\nlNK00dUzM35Ol4zloZeEhiZ67GrmLiICInYGFywpHV3GjQmonHNUnjltGkP2\nXaNgN1ylYoA8uvscGLdGQzVfbaIkBf9FDBWTo9JERr2tPW7ve7c3ciAqXS9Y\nNV/9DezM16ttyDDiIiU11ku84HnM0eGfWy0R3w8hs95JJyY8rFA+PO64AVPo\nwKyCH7vStGJTIdRxhnYdXSSIdaYUO/ONwpJl7puB/juOS+c6dd33pSp2BdpS\n/17UjpZZmkRI7FAl3zhcLwNxXIEhJmW+LDQMozmemNoNm3s3HXCrEhmfrds6\nMYi2sKuaZfLvo+epF5MHeG04gCgOF4x4YKFOuYKT08uvSZXoOp/UQcUvhIVV\nuxaedEzFoqYKmzPO6iAJZavy8Zm05rJ0JGN7S07fSyVuc4st8ou2e8obGnFS\nGP93\r\n=GHk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX6IOLgIFvMsEAmwKcEQ0r07z0j6xqdUHBBBJwSdobUAIgLEJCRmOkGcW28/+zH5vAAxJUAgBCZhQLw66icbazpi4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b7b220b1.0_1616113151955_0.9247141917782165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.233b2de7.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CoFWW3Kv5NpQf7gDHmch5l6zbxhqwWKZPoK5JgvbKQ5+V2RiVuHvaacsb3cJmtzoAuw2MjpZAO4lNWTwXowdhA==","shasum":"7dfc8da206f51cabd7c24b2a55a3cc19627887cc","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.233b2de7.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO11CRA9TVsSAnZWagAAH88QAKCwxPdM3Gimxg2Ctg87\nzCKwsKJYF0KqN2AuJrUh5gP4FPfGXfm3tyNzmejlPU8aOOOgbRZZ3VAY2kcq\n93qQmnwZ7bkLuMsl6lnYRFHCmDVLo2ROVXEk0IT2ZZLKky5ybqC6y55Bss+y\nSFVDzKPze52so/REDgZga0CWqJl3bRtYvwVS9KtigMRIlNQ1Hn97ZjumldVH\n7YSKGNEnVMB9MAuyhTzR0N0TPYapxAF0UxAD2ysVqrLvwLY9bqGloJjSvRxg\nmiSK6QDcGSnLMFvMVuet0qyhU1ipswmETG8bzEPBuU6Bik5slYoAumXTajCA\nzj9IlsTboLGQa3ebFndUHgfAao1I89dQ5Uo984RShjAD9HlVhBiVqxnjDC66\nWkNKL9HmCKUaPB3MPPUIHEMETIH4ZXt2TlVXPnrpwuXrB4KR+tDH3rr7IJoV\nv1GuEsEhjB2VkaxgLVxk8ZQkZGywPr1+nlzQFDuCFaEiO+fG5EaPHRWkIfO7\nJ69osU3k0DoVjxoEDxWL+gqCU9STL+ahsqp419hqldmdkRDjWSYj3N8PsKaQ\nR2VRQRMkFPyFkHjUSvRLnkdu33/iwNuDZljz/f9A78ILTVmhKV/7lv1oJcZQ\nUQErr32tpDUtXL+/W+uApMyVVOUVQiWcrDoCQyy5zdLmXv6EBcNBMficpuzf\nsokB\r\n=/NTN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqvTdGwCSXMu237F31vvKs2I2jrOyjLC0F3dE7E9cB5AIhALu7zieB80P/nbvz3CMEPyoIXRZvFP0ASgohs4XqGNVQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.233b2de7.0_1616178548492_0.4307337323673537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.0c1a2d97.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pfdrTJzvghRcwGJLI1EEhaNmCAHMvkoAkGf4CvMMyELyJoV2ekKDSyfBRGEsZhNxMYZE32Fa1D6VxRoSKwqu2A==","shasum":"de67946d2cb285ff4aed3220b88b9e09bfff431a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.0c1a2d97.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRWaCRA9TVsSAnZWagAA02EQAJvrjtBUe67DwjxUGRfB\nx3rNgCwFwo+kH0/vE8Q2mveJpAP5Q2dBzLZVeiuBVdglGX+4VbBAymnh7lIa\nARP/No/2hJLKc4whtdl7e8KLJpOTibYj/8kx26WvQZDMyPzUovUh7hgHSXJe\nI/KP0tmqiMOvgD8Xx3C1al9J4jkSbo/vMkPywh5jqrY3Jkmf9DvcsnMbFZjV\neFVWkvROnwqJqv3tgH3bD3UIU44vj9y6Dw0bonCC9RHdz8WP3gdUJqvPIn4b\nxvvKnSoHE6UXBkf0265ykbqFSO0tFavwbFbjOqYD8NYPt/4cySqLVcfieSXU\nCXcNC8BCGnJrEooNwH6F5QXVUAjocHGK4IoIkMdHo2PayUXXy59JTTG7fr3F\nch1Jcs/BMXx9RBID9hruIsXd2yPBMGjUlTx86hqezPA0aC7eyTcb8mCG5ES8\nRh7zZ2sxohZnBKo63i9XId2sVuCstU0UMeoLgfkycA4QgwxerJflRvqELWHD\ntw3yud/+jygJcc4yUYtJHqOnbMocbU/oeass/BEFNyN+ryL9LRyZIoATpSf+\nQEYME0Lb9BUAxXD47x1gnzpvmkrzg4Q2xURrRN+6/7/bMuQ2GseJOvO5KA3s\nIEDvxoXvEZ0nAT+/nVNjqZt9LhumDS5L54RIoeYqsNIgN2ezkX67o+GLHzZL\nnrDM\r\n=vUKK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGc3xM7u0bTTvW97IuvWLi4KYD47s8D4uEBca2ZoYy45AiBsN6F+tXVKfbKNp9+ockSOG8aHRlqSghp/pJcEoITkUw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.0c1a2d97.0_1616188826046_0.43609026898033565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.57ca2e73.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.5f0fc444a.0","@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-y4qIluvObZhhtVIQa7Uq4VdI2fo9jT/ThAUKRovidpR27CyEX/ZYp/Cjh91FHdX8JPUOkDWT6vdZhDbimsr8pg==","shasum":"9013c5d267d2dfb494334b25ca5bd71938e0a801","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.57ca2e73.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShDCRA9TVsSAnZWagAAagsP+wacV3bnPrJyZQRl2Zcq\nOoU4Dxf0LF8W+Vy876eEZULDiBN+aJeecPMBLG4FkyLBedyt1ZUlZPVUTBbG\nyiVsCj8qy97Cgcao7gHgtadqLgoZIOGNj+yfMIpEfe2efe0UbcvZ/nmuYOg0\nMMWvjilwSaCOSnTm4wn8Nd3YvS7U5kQRGGohuIEKK/lHJshXTMyg2Y84apIA\nubgKghjnOrXPocw1Wn7YUsHavwLZwbsr/07J0uL/l8Lu3l3vEuuvrPmgIAfk\naCVtmki5GKLjEhRDbpPJQ2XE6x9hGW/MJCleMbMTY9b6YT2owdFhnTFDw4Kh\niseeZMjWMjfn7QZiETHXMrseh3C4zgB8XqQRiTY/m4kQGJrb5mdcWVzjZmKv\nSskw58jSsEwkFgD8LxXP/fkS+XaCQqP6MVrUjSolrzhQDjFyI9L2XkeV42eb\ni/wOmKoPjPOVaKZuWdWi/cIFXVh5ZuFqYZbXrQ0psfIHasJWMvCtmnYsL+mb\noNvXRl5iCp++7xljHOFVbcKVnSYwIiY5jl+VH5oYTEr39OZby2I4oS66npKC\npEYxIHQgaH6Lj6ifCo1GVEmK4Sz/fr2avXQQFvKEPo5ZRIrMOTSqfbzCxKhl\n2ecapiMcVnqVdeLbJP9NbGo9wXd+239YlJtW7eREXoLW3592b57R3lho3ow6\nySZU\r\n=VPfe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOyljWWhIV9/droV4lR47uY77dhP9zh3pBcvSJiA1ZEAiEAmhP37Gybo4VqKG7mt6UK6L/7ydgv+QIUTGXQB1vVCZI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.57ca2e73.0_1616193602722_0.5211107446615255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.5c058f4b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.8943b991f.0","@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2ucWfoI8pT/ToK8N6XmG1v6OFQHOlv0t0z+2iuw7p3FQQ6Ex0aSZ8hApPk8LjW+oCbMxM6R32f4U+Yg4yHwIKw==","shasum":"d6d08f75e58fc9f998765fc7eed812ed6153041f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.5c058f4b.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTFCRA9TVsSAnZWagAAgqAP/iKEN1zetCcc/1mKsG5g\niJ73uG6p3gvZ0ptcBx+PmkcXwiqE2u6WYIExvvUJOjY4ywyOeEG0pkB57QYM\nUioBF9zTUAVGoqsucbO6vZkXd9t0KQt+QfmnPkncDQJ2ECwRNG7UqMmT00Ip\nDPU6tU6/YZyyoV2ggS2H8ARLPsxLyYEqSUOOOVhNJSYs4INofiucq0YKTQe8\ncOJ5pD6GdIpfCb7f+iDUk3DQFk604SzB8mvs7plwFYCN1mGxoAAponMUrLIc\nIv77BbYJZGk2yFXmvO75e5byxFK/JHNR+Tot/sVquMMwRntMmScdamfJH5TV\n1G02BbRq5Fy+lWM/upoG6lFfeq86WTfLrboDqwf5Jk6tSGazwzFVy7vLR5DH\nbSPQ/FtweyFeQJYyCZJRYm/0u1MIJgFOpEx+7rOLGqRkIVI9EiUz5bq/SbDs\nlmyx4Amec4aIeY7O4ux4nxF7rE8yDZPWHVwHX/Myv9Etoqsp1VzCr9vvfWZ5\nd7Hnt2uK+HHq4rJNcExOC7fdP4S5EVgJ7fV0bnT+lns42Yn3XGAB3VHCh63G\nMX4ZIpdkNAGx07hv/I/BCERF6IHyM4ILT0MDH3vzSjjkYfV7rtdJFavyZ0nK\n3vVaQBPMcDlCLtOEuEKpvHZiq7arUjD2oEzgblBH+5UIFjUn4ifo/cmT0Cq4\nU1ej\r\n=sIch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDLzI7ysvUoAQ6ao5eq89prs7F0uY9BsCYVBmiR/Lcf6AiAIE+OUV2UHRLwt5gK2IXBOqXzzsqT92QnKppJUipTGEA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.5c058f4b.0_1616540868543_0.28168341558396426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.e27ef7cd.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UcUvi1Wemptays7e86kJNAWi8rUYs0le1g8UrqkMhNpMcI8UAmzkcf4WhgslsfsZq2m11etAM+tfvi6xWHT0Qw==","shasum":"36f0afe436e5a4d8d522feb65aa78de2694eb674","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.e27ef7cd.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4W/CRA9TVsSAnZWagAApYMP/1WVQKDpGVUUd1TlIPuQ\n7jpC+g6e4hewAcs2CsVmhRi7o+7i6g8DN0gHdwAMp3bFUkhyXBkJNQcKk1bP\nt5x+GBaNulq9xORbsnRAfOr4V+9u1YUfZrLQP8zzRLTLHyxVB6m3EWp7D+L5\nzd5SA3rLlloKIsqEK4GtGU+36KvAqh8z+K5+Y+0FGz1ty3F7/QSHZhAFoJZx\n7edQN4fLvUNi3LpGcI/KPuDqMr3bdPxKZV3L4JKYYKmpHmEI/wqhxM/4++Fi\n9qGiG9Pm0Z/owgpEr+YC1KoEJ/W6YO8sepegaZVU5N2PNDu6s03ym8cZHUqH\ncwh93apnN2CcfPQTKZlyRB+wHGo6baVEB8vbx/eLIP+HLFrOcPz0UVKLXqHj\ngAzLNLEq5G4FAOV4afRKM/G0b4D8cyCrYJrvmtjgzz3gr2yNVXNqBrw8afIF\n0TzYzmws71VoISuDkUiIqQ/uQUDhocdaLMBvx9pvVKF1fcEYxj2yvQxAlGlN\n7e6lu2hVDdG+I+YczTLLrG1Psrj0waizsllmewQtDV7lFsBQjSbg92cnvhGC\n58s21Xb8qr7wXjbpWEfuqnIAqsRuOCy7mJkW10voifluG21uj+JI5u9LErTV\nS6NYPeSxYPI6kqjNttzm15wjSOx9DK/X0nUlP0FwvKJMqrRBOq3Pg4dLsjvp\nk8ry\r\n=XPSI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkvMKeq73XPuRxN29TBwfJXQEJm/QRtJdl/fOJoDtkcAIgE07xk55zhZ4v4luH2EV3k85OMftWlGwTkk3IjWwzGig="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.e27ef7cd.0_1617135039058_0.8561339245105699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.15c09e74.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KzjlME7MaVgrmBDlhyoOmRPN7F4chRSC7C+BXygVW4VrXmWV39TFFypd6HoOg5mE2On0ixpre5tQlaQpOIf7fA==","shasum":"677b1b1791a27deec7f078c9967f5297db91b061","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.15c09e74.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKd+CRA9TVsSAnZWagAAkfgP/A6wGCq/zNRMTv0wvLlC\nyYlvE6VBiM9VjgpdZazdEnNG6wmCD9FkwYGzQfkPbVp4dXUqxWhQEC+IqcyN\nm9rIhOeXe21UEFM4XPRwnBIlyan9IvDcVYD2h6Diat/AOVGarUFY3MQfdPhq\ncgZlbcMmIwMQ2Tg7nijtp2fPyYOgRChHJyTKcFyjX3Z7siAMRPhSruWA3IGz\n07B+SJ1bVmI8slMH6FWblXiAwh3JjlbEWWguAA3Ct2QaasUQ61iLMx5GqjMo\n0fAwUA6ISBSuq9cRQkNhlBEEiHN2bVOoYbT7wOCrAhZUKj14eiuU7uIukTnT\nh/GvbKk5+YvMG1R6RivyJCUvR0eyi09+v+DwEvhQMSw6zBJ1T5uzQc4WAei7\nQ97HXzgLRd1/Yr1c+xT3X46JELVjGbhK93JzN0hR2OeCsjiwb9mk7EzrCiSb\nSZhasBz0efYKbIsivsRj6bPNib7vaYwO8VF+GsPSEdOD1fAxYQuzbBG5l9pe\nCoYWMWZ2u3A9cjVzokO2qBzDWAKPUvO54XsY0uNVnWy8e6QSpeAzwSvragzn\nw3jkYkrdob21e69G/qYG5MCy/DMig6ISflDBtsi/lkyIfb3Io0td44sLMu+w\nw4lFT575bK38RGI/+JcvbOSy/UlVEL/ewnwwLjY8127Yfbg0qzTEHrC32a9S\nWof4\r\n=M/s6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe6OfImXwLHsvFdVZaNXraP8IPy/JuQSUN4ci6A7il6gIgYa9TBiZrhoTwKMhq1ZXv2Zqb9gLhtM9i3IlaEpjWR5I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.15c09e74.0_1617209213735_0.9131021759531412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.4dc32be3.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ySNcYIoBKV4VceH67yxnUiIWBUWt3erVkDrlh1oCAM9pT4kQM/Bo6mW+Txicsrkbx3EGz7JvHhBEEsDjPtUiDQ==","shasum":"564f50cebc4f3bfff74141b21a4ac194ea8a54a5","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.4dc32be3.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQoQCRA9TVsSAnZWagAAlpMQAIPn/xjAwCkrqWwTlGd7\npAU7YJQ8yCku46Jps6V8StXfoVQRX+DZbktZqLN7kgSCJdved3Z7h1VzhrLC\nuVoqWiwl7b2plmC5OJGgp/cILngWOZYFH1uf9p37KvE/w3wB1kXdsIsZyr0B\nb0pnJsnTiLomjljpSl4fnJBiCs1T7evpAJK+c+cOMHlEYjVjsusiYZUqROYM\ngpGkkcOLV2oIjlNp3VGrKIK8U3cWQq/bc7JxyQ2xFPXxx0y+XYyT5yArtn8+\n2rIDHfHLRFWNqqbY8XOKPS42xuMJ7mGwUQpfgF8yOZnxd9C7O4BiDuGIdIYE\nJPZ+1CeYByWJHJZih7zg+VYlixNYzwi7Yj6btx8Gz8uj7IiGOwyuTBnMrvEZ\nHTF8p4ub9C8bX6G7XL3Q+MMHiBjfif5jjU4Dg3E8quacVUg1zG1sK44I004d\nMGddTrlCeZ5/NK1t61Z1sKwl8COXOlJiETYs1SXkYz07T5Qkj611pE+ZMF+Y\ndHu0CMj6/jwX/E6q3ra+1YsNL1Pv8dSZ5PJkx3fk4pSvBi8R9BspJKJMrEdr\nDgGryVS/1I6CkUMI/pyUi4Oi6np3MKjdep4jicmJBcz+bVwoSvgHwqbA9PWN\nQoTNMXPC/u7OOVyB5uBUo/+S23mzDQSiBJjBStvYRRywfdLJjnsdDTSU1IP6\nkg0T\r\n=iFUj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaI5MC/sT4EipqiPqGtnnUUiVqjTJZK1pwcHrBki3mvAiARRwo/QgLNsESbbx5LIyV8U2B6DMH5saxtJTarR4gC6A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.4dc32be3.0_1617234448044_0.3557663607794195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.4b717f65.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vYFE5nmpzs6+n4cAp+RteBmYQNSC8tZn5PCsAuRhw7ixfkfX7dVL4Hgj+pFa2Np+ed/SPmPQuhbyLxjg3JoyQA==","shasum":"eaa4f041b421b7f8c10cffd28b6676ff4307d09e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.4b717f65.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg1BCRA9TVsSAnZWagAAVkUP+gId9KZyK63rkjEDSEx7\nC3aRZxtpwPnOLRn/pgcpJhSze82vOgQ6IgY7HVxBHJa8Yq2YOy/X2+t1kCfy\nlTg1METAwQaAM9KC/8WOrVTpGo81IIr/GxoAV7DgTRE5DNokSkijr9L1xR4X\nET0HdhF/9X9qZz+dbdy0szhcDhj4jC6o1zQvkJN/2Nnz95QVDiBSxCJxItQP\ngp5P4/dhkYRSPMm99sZyOkC3HjvlbZDkIw5G6YA0NFDAntiZEVERou8xkZco\nsFB+Jk3rKCb/CPscY6rn35hDs8J66LjfgsnpocUGZzCDqk5olgvFGKfecii7\nh4qt9yDYxWgEJ+J6cXBHb11mh3QoC/NkcFmP/0Y11SYQIj717q17vtYT2jm+\nzr7H5l/uHp922KIi93UmQHJeS6cel6rOXrHLpZllnUOTH/Yg/vS/pGSPBW4v\nVWQQmZWyPjVLDOnak60P43BScnPqv8zm4ewIVux6F3iSpzIVRDufextPVAOR\ngBc0psl6JNBmYHWd6Rdf280PBAG/ZbuHhZOpwAi2bzoWbf+toSLjRu0ImhhW\nTuCAdLxdcIt7l56kw7UN/ZS2d6YnUiBUH/7lzY/WWTbmxMc1aoUrtmEMJVco\nVtexKwbMM/iec66vFeXmovbZKevlsD2xU+2ldvmebVfgYbKlkIUAolAbVdVB\neKED\r\n=Wt8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb9wBfcc6eqmVR96LmnaqcIZu3TM6IJxmbyBLieqbqMwIgCxrjJDGuBzLhMeP24TnugcAO9rCuog4pAQCW+ng5zms="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.4b717f65.0_1617300800659_0.13785583367301313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.c6870f20.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/xedA2cqIamIuH5oXCoauTocGFbYZPF+GX4yOmd4qyHFjK6AI9uPaXB2lku9geTK/5OMHtJIPhbaHFwoxYWDAQ==","shasum":"54ddb1e6e33377fa4c17a8151d10966a79fc0146","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.c6870f20.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZloPCRA9TVsSAnZWagAAjIwP/iw+0nfg+O2RFeLaNN85\nNZ4MMXfXs8kX1VgOq8SLWltcbAr6hk3x5mKmj/ptWFv2BBg/AbTCeGjG5RL9\nAkXKkgAvtK0pNZ2SDhfVtf15rTp+44fKXw16UXq3dI9Ign6nXzfs2iVsOD23\nKiamaNGgG8H+tJxvtp1u3z0g+JVw5pkd+Udv3a0uJkmz44qUCMxfbaoCrty5\nj6IPP6mpjEunilzg/yxik8XIdNlRTyPnDvXkoasRgEnYQ3UnwG8BAPQwcBtX\ngZQrv0FmtI27/I5TLKo2THyT86GPjtAENmbu7FW+GltXAX2rBsMMtgr0/2UR\nDtO4DvCqIJiWaSu7QzfZ64n7IgBmTamgtX0WjtTb/+dbCxCv84BjmEzXnmCb\nXMDR8iEVA7HRQnd3p+lOeCAgpyOGf882o2JbmApMFpmd/rL5x1BgDdyPa7bh\nlKOy9628JRSWnbRVlBbSo3kLYHhCkfzqHkET3ysqVhFlEGXj6CQtmGx+yKUW\n83MiOjlMeLlflbS7FpSndBh1JcQSlPvQ3RXn0V39LJJeLejRTxM3glo6AzD7\nlFVP2vwZfQPWi8zfCgj8QwOxTl0x6pbU86MVggMKyc7EDM/++1f6bEo3oEPa\nfx7Ve+vfzIY1znZTgzbNd5G4xW/uzG1gb0cAkvKandXCo6H6Dm80Gr+QpiJW\n0KWG\r\n=lI9D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt/jKMR67OZI4x57hpYa2NleQK08DTYOYlJBaMJiSktAIhAPajlt4SgoczNB2nbeZPlhEApLdIHpoUBB1H0C/eeFZq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.c6870f20.0_1617320462800_0.8684562704006633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.852f873c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OLflzaKZptX5ICn+GiG4qsEBopjYVkwluJ+eDltVVgMQuMV0YhgUREYbIUlj32KnGpdTG5T5aPoJtoTOWq8Xlg==","shasum":"cafd94dcf5e59326549cd52932dc7145af8e213b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.852f873c.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqnZCRA9TVsSAnZWagAA/yEP/1WgwfUWXpeAw6tVmCRD\n9Ri4KVTfOqaFxaxbvbxsWj3/etexzY+cn1UqDRGB1N4oGu7RNeneIwvfbwGX\nGfbfmu2pYl7+T0yS49bEwVzsh3zsZ0ITGG79ytzcMVuN3GA5xV/VAYrI+0/3\n5vq0peqo51sfZK+8Rk0WpPn8TIr4dO3fhU+A7UkNZP1S4iqEbd/ie410LRFr\nj8lh1G6Qe5j1tdr8cMHVw8c5bWIUM6uAL+hvZSjpNIJOmG6eQ1hO8ujkAH6u\n1J+uPkKAB8q/BNybeOBVw2ZAHA2QNkttDnjaxII3fxBazL6IDI6otNj7yc5g\n6hdykyVzzLNVXKe3AmxRSdXs5ghEn/ZKKE9p/twfKfqDM2jmMCwtb59gC/fm\nQ9fy1wcRv/prWL9ZmeHmpbWiQcXUooOUKNodMlKjBw96ytM2RptE3IY9KL9F\nHlHVloOI9VBNgwAuFMi918FAhETseyN4BUCEp1VxpU+mSVFY07JivREEmSdK\nCDCTQ0HjRWkDWk2rh6pZYKLAOZ3bS37jttIndcVqgDktrL5mYgjyIoKsrdXq\nKRDC1bXaiUTF379oAg+6lRlrcAQjbHLtl4Ns5C2cmewrNnnc7+bTb8S1X42j\nF+zhFhNy1l7M+AS1aBd0tsjctRF4cq39Np1brdY7A7bgQWx5Xquqc3eGmOfV\nBfWy\r\n=L4CJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTYkVsvpp76o7Br1N6XsP0+p+vqvlwfJGFp/ip/6ROGwIhAKASBeHaSeIQo3lEEUNUvry7U8GEH/+WFgq+u/fORL0W"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.852f873c.0_1617340889369_0.5872324494254939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.4a674a1d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GiwbGktRvvu78axNQrgv1BjY122W6yWtOn04+qycc5TFaOsqJpfx5kDoZRIf3cNcmEGqjmAfqIpNgHGkRikxmQ==","shasum":"8f3008453df0f95751a6a7d5f926e9db3dfda980","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.4a674a1d.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy2eCRA9TVsSAnZWagAAodwP/jL4xOqngHZ/+aTMfeue\nY9h/Tqa55wo0dGHTWnw2gES4TzyIanblghJBXFnjHt27gHJDTSp/FZ4WxEUB\nWl7EN2RwV6kNvWXwViNfAPlol3JdCm9gPDLxuZxMi9GOwWZuD+qxkLuTYkmN\nJp5K1V0GoUrGN9o+W6/eGuAq/wHtX8NYuDtAGIbC3ojl80f4z9EaycR3pLko\nugKxwTI/7qnOsl2BB6BvjKxbKyL5NXTDmsBeGEYztsutkO5/03i/Bvbn+tqq\nPaKuZCo0mUXtMgh1WQgx9QXpE+9EN137qxFtq33jWiufoAs1NmoVd4Qt0fP2\njYv1b6FQowRhopSFedYyRAUtute/+Nb0pIZEK9ljCIjnp/i1nublB9momQYT\nZANgx7i9cqobzMXV1bEVrbspqOTIF2git51rRgwMkQ2Ok0wo6RbWacNI1VFd\npzXOyd+n7gjtq1K4CtBb7Oapg6+0U+aXISePfdUX2XRGMEJIVk5mLU1pGbj9\nVGfGx4OPHuciiI07vip1DB1gaECsWgJO30zTidc8Bl94VtrB2wFPtOTm2gaj\nX9xSUCREodr9B4596H2waloqjT1i8b4KleXr+d/O1rVH7GDc3k50X+ylCKhx\nZ/kPaJe2j1BtKzPe+neOjAxblO/yKpFJKbiS3h394zZwIKprm21q6I88ULmj\nhKwU\r\n=ylFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2g2W4kl8mb1dSt2N5gA/lP3O75ShpJgJKWWSaDAF4HgIgfeZ1v5yNwf8XpHBoDuWkkszHcgmWKXcgNse9DFoHPgs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.4a674a1d.0_1617374622224_0.16639531708913058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.c5b29ff1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ob+/vYl6C85Ro2MMMXPdTFZSZlQ4JC9BoDa1J3V9A00+HYxOcOfZ+IsiupoMzPhQDK0kvguBJVJreywnxdV4iA==","shasum":"6df49cb80cc240c85b7324f999e3f117fa2594b8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.c5b29ff1.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga02dCRA9TVsSAnZWagAAfWwP/3mhgwiVl5Id6VL9aoHI\nquecq1uptP/rmDqf4g5skhqoqnAjemBbyvQ/bJiq3nK7K/Znz+arPJMSgykW\nkkbvnYdS3BQJd3rk9mHpSsOIQGWF2Uk4JCFXx0d/k+Mve0LqKhQfknM3hA3s\n1BA15W5SOpu1t9yaXhLgBiX5am75mPmO2xIiMQAc/s+r4qRMhwBcfMw5GZfd\nNAx+BBasPZZ8fn/b2JekRwYj6u1KWnxFbjXfLF6BnwdyPGinZk7DPnJRAEMm\nqwKJ/lGCUq27bpTTrcGfVXPNtLT6AYizZd9NHytmqpv4hjNZB1g0Yiv8GarJ\nhFOItoqWuEVs2GIIqjObgluYDxSPbfd36TUS0RJ6R00YxLP5t/15gPh3y0/j\nUvOYSDbz2SiA0u3eOkt3cdOYlL9Qf3IOzRXVRJk4F0vVDgZMsQxTSAIpqYlK\nznHrQzajg8UbN4gPxVJkcYBi7LufR6JjARXh8QoFZGJ906EsYOzGQBtSng/7\nAzJZiWPCDd+sjPETUNRwiPc4RxlsfjQYuE6gCIXPj4BLddue4gY0EBml4Bx7\nZI5Iz34kSS+RmKoYFHMy7m2kRm66vbgLUjDSF0xTSVeZPqrzVfYH7CbIojE6\ndQy+ln756ZXDjVpDKJvkvDCMNwSbdrifZgD8MH3KvzVP9YjjYTmd91o3lrYo\noYjZ\r\n=6gH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1BuLAleppbEfpee2tIKn0sh57+PXJ0FKUL+L3rdxgYAiEAtD3cv7TeEsLmmRcJ8Yucw4CNfLdeEriBB0rGkTdobmQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.c5b29ff1.0_1617644957389_0.6769452983745374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.583644a6.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.94f50b260.0","@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OgYRAjVEVqhpdPumEp4wUvvxlLXXdDn0W4oIzD1cp03cIXYQjft7YRTL8c7/b38VzJIE8l6X5g9VvxvBIY+Uwg==","shasum":"9efc50a1c16dd781d53a1a92e1559e64fa8fbd27","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.583644a6.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03YCRA9TVsSAnZWagAA7bsP+gL0P8S9Whl/5rV3DI3O\nhZJBFOOEkzoxe843W2cGJrrpfU6umfK9NxVEoaNiN1evVtQeA92Sny6lKmGW\nMpCYI6LTbRmUabLRznlVBTFKZ8PFZk6+uWAR30PHuEUlDM9e2OM/NUgYLG0N\niBcY7bWcGgA3Xn+0Hroj85Ag+jB943UeztoOkK0BEjdB610WkDIQsk7+FU1p\nzftBedGcyh7h3igI4SFdMVF40TdyBvPWw0+J6L4/mql84EX4g0clO3vEgebo\nxZvvp8jNBDdskYPCjOf3CH0p/IiDtauFylfyqUlGaPp0UDWXUf3Ea2yKrG1u\nwVtfEw60Trp9Fu7U4LyZ5F8KkH9iUy1a8L01K/QY/CD/cN56RNZUv7mPPXIP\nUHXXtd7uEA75Exld+YrHWzC6/JZM7rKeDMPCPQMD6LPwCkmzzYsKn+iYWRYp\nyFDkNlG7wE4xHUVbt0g0C4sohmiLcCqfj53DXNZYlWU5LNBUm6RpjrUelK8Z\n45/wQ2TtAHmy4pAkbdXPOsMZQRFrXU4Z1P1NRnxGS6/0V+mHME2w4nRxxJxd\nEHkeIlIn8E4oySBYXTVefLaxz+pfMS7sd+xVMQyqYwhBgL13lU8mr1lUuXFV\nDVY7WzUeuZJ9f0DbDQIxPAI1gkljEF+3WSYTEC4TjnyCJdZ9jsiTCRsdhvTP\nxj6K\r\n=xz5w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFz3Wq1hr5LMzBg7t4OjSZVQQVzi+jBcr4y6gGNuvEBgIgRWxC15ehXwUNcs2ZDV+2Zpi3JMIULRuR8pWqHk5fLOQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.583644a6.0_1617645016127_0.7043666952292329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.02ac1e6b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1WnZlyeWVnWI9tD6UgQuh/7V5hHZf1G6XUKsSPcAENSA12LZ1vAv4WCyg0jOLSL4I1mYaLd+NFbFz9azhP/U8g==","shasum":"f823b3edf608c739d79a8bb29f6cf72835dfbaf2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.02ac1e6b.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKnrCRA9TVsSAnZWagAAUPoP/RPcuJOTMEIWjiZLk0kG\nINvMYPCVxpOmAytFshwcFij2DXUC+lkfJo6eI6wqWB0X5gb3QJk+Sic9ocxl\nm7Law5wjQH0vLmzmj3B/39UaxoIyGiIDIgtTT/RVUY65PWqpsC53sM6e8LQo\nB1xrr7gKizF+6GyTpwuu6pDeoPhwEV0TN7mHTI4/GgoevxzpbocVhQn6IiQR\npYhH56YYBwVPcGCWFxHmzfPl5Wv6ag3KoqwEiibHDmDobM+SeZX6uIYgcPbs\nfTc0aVq/9pKG32eueBgy8d65oA4hNHFlVKAQefUQYxHCStBgsOC4I0fngl1n\nm8UiL3OAOPJ51LMK37EeeL+0OtkLAulVeldPWd50wpfSF0e62fCX9w7y9VkC\nRINhi6Yb25cAaiOGmbmVF2ivKYdPtow+HW1jhPuuIrjOa2XiKHvfF+HHfOTR\nor32mklhsft5YCAPtZwlCaFirxxwUdvlpIoITi/eaFfIt3KgbRPNvQShD2u7\njvT3oXI0oGJD6UopZgWsS2NCgHDVGrznI7+jptNhimry8/mbs/L8eEyLh5y4\n8nMy8SQtqkAfl07ExHQ4L3nfjwysvZQZXNwi26l+DlEj46obKIOnsdg03bso\nzvpOdlytlNsuLQYSFxHjRCRDVyPgxI6HP6dxQs8ewasCAQuiKLMb6Fz/tOfd\nSU9C\r\n=a+K5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUOQK+jC6mkl/96uOZj+dvrja3lD9qEvwq2MFdHktuNAiEAj5a/BtmLLCLOJOMNk+5/oqyEoiLGOO9nMSEmy+fc7mQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.02ac1e6b.0_1617734122661_0.14335307468759106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.5ac5856e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Tec9nGiDVlm/kspO7rXiRyOuDhpjUQkTWoUGgS+xoiGP9XaWypN7AECTptfLLIMNy2RCVw9nn0zCqSxvZpZslA==","shasum":"f2ceb37e6b2bbaeda4c32d958aa506b8b6212267","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.5ac5856e.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKt2CRA9TVsSAnZWagAAZgYQAIT/Si48o9r+xS1ITNSD\nnjoZKAGprGh/uTTnDs22k93eo55w9LER6eXzH68nqPr0S+tJLkGc5w0ku/g2\nOfD5NS5tG1v5QtKfvdcCzN3wJvS2KvZMRztE9RTpW2gXRe6nsGCixnZ7C2CW\nD1jIA+Nn2I7QEmCgXFFYfzwp7otpll4mLzWGdkX54oQeg0GBkeC4gHiXC2u/\nnUYaaMSOuwaH/BRPISgXouyEmgLfQ5oN+gAWACx3gRLFtxEtPixQABIWwx/0\nls/OptHGENGqxrP+SiwlGHZ8FUMKR4zOFLDa4viZ4wqYqFzACmi6AI9YAQRj\nd4v2li5QjSILA/xSXsGe9Z4fkfcA6NpN56OBmgoL2Gv/6vFZ3EkC9rZvb+a/\ndDzkkcXSIRiEwdJhfurM2PDkv6rLOTEcTYlSl5LrmHdMl4LWnXHzC8HobCGC\ncmBlhxjMbsNk3UGSQR39Jt0TRyL3GUoQ6LAvJ2kk3+uwEPJS/+MVgyNZBK1w\nMS2XwVsJZoBe6ubkVJi0kG2LuMuxeAI8SlRf3Mm2GMUD2adLjk3BS6j2EZjB\ncpumU2RLh8tnL0sbaf0XM/sqYOeBrESKzolsQ7K9i1fISgNY98kKPxz6kVVY\nzpCJiRzud2f834D+0G6vyEcdW8awfyNRX2HziQuyJl/DGf/7v0Sa5o20qsgv\nef8c\r\n=vv1+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxO9asSA/IImtradSGVLe5jDMnELvgxBfjR+8j1n2OTgIhAPETsM9oQFkPZHWgB7IdQmGJE4V2jVjyQCgwG0eQfNiv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.5ac5856e.0_1617734518109_0.46235428027899195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.bb23dbc4.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-eGwtVqRzdIp3ACF1Siiw4w40DXEYzibsF0Z79HeNrCOu/Mp7sm7oVroONToafnH350Vromu+w5vdgstMZB1ZZQ==","shasum":"cefb3dbbf730cded8fa9a369e9fff2d4184b6f8d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.bb23dbc4.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiKzCRA9TVsSAnZWagAAjcoQAIKGpzIS3MsXnbjdlU+8\nNGPGgW+M3tljcoowX4oEf4hReqDidfl7Z8m2itT5rb62ZaLL1r3ApVZIgaY/\njDsJsJz0CL0z7g+8U1VngUO1FbRXKxNF6Z1yjf61xN7VzAuilqeYUlfkZnSb\nygbgUbP+5uOlvz+RyFTPGgzATLx7BEtyCmLQ+lTywMB3Q/T0BtbC2wSOwDJj\nd4v6NSiwjhQdzL4k2aXo9B57tBVbxj1jd7UKyEjt4mz7RJm0neb24yNh+Sc1\nGth+2onBlMpCG3+oe4uw1eEn6EFT534rKjINb6PJ+WApuVCFpxVzxfzshXsU\n4P5cUyxBB5AfV1KIJ5XCoZks8/Po0Pze8RtZfVT+JnXhSsuo/CVvzwI14MJM\n/4I1oNcQ+r8K/2w1zdwBuot0Did29Yptbpem4t8zANZO1XHLauAwYVJ18NZx\nQdg3In87yHVCywK1JwFHZb/Hs3zsYdDH+Jk9BQ+ug548PdkGxKEwggRezWha\nvnLiG7z9Qc5KtfNhN9V6Qepq9qHzYwT5eJmOCewkno7GZuHsUuvjosjrg07O\nEb+y0yWN3Zkf4hMqqGmhGg70dUf8wm0ehL6js4ujGUqwZPC7RJrOtTOR7q7g\n9378EBjy3EFSEnl8/nk/+IsrDZPP+tm34/QJhjQRRXY/upSnWDICMtRmb27p\nUbjf\r\n=G4xG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg9fvtzvxUH4wqKzuF4vxlB9sw+aR9jpsNMWUW2a2LNwIgfdMW88/JQGf7ITbeQo0N6GgUzLbCDlBiIL5OkEFusys="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.bb23dbc4.0_1617830578488_0.4353211472062499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.e539904c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c91e8d141.0","@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/SVOpQrBmrAtzH42cmBONuG20jBxE5dU3OG3UECjwgsQp2u/9Zk9UA4jt3hD4Uof29wCdZ2slX2742LTKUNngQ==","shasum":"c01203927b7adafea134e2f5946d5d7a30d83df9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.e539904c.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0TzCRA9TVsSAnZWagAAOYAP/2HPcqr957/SSp1gpHkF\ngOeO4zAHWL+EgCBlVt+3TeQQyQ1hRbd3Tb+jVi4H4S2wE6326l79JvWYlNPx\nYI+43/g2wOgVeY0Qpq7eVUmuY5L2APlL/jFcZIStL6gLn7dsYMExb0EyXG0+\nFcfOMPZ5Tpjzezdr4lfOptUciCC6tI+PYXWoiT54/gbb+V4lAGjOM/rgK9yl\nazJwKaD6FNoYeHPEeHSecTs7FLjg+5ALEZ07JBnbC2vPQtTpDyQ/ofQc2GhY\n6pHgAjDik6gg5IFdv+57S84aaoSSsWhyhvdofxbzOz673gQe0ZWV5k+h9ykD\nyxpjq0qVsf4FdaZD97aBfXT5i/cMRvhvnwWcMsop+ioIyA0qCadEhbcAZTos\n14MBSQ657sp5p2sX4opi0iQhyeFihBsy2Yp/9028oNkVKPy0cfvSL/1w9w1M\naq0mPDVDxdSMPyIwXTjYY5AL+JAAInL3Q5Ga+gjkGbkOHxsVp/WsE1hdj3K3\nINOyV7wkaDs+Oqh7rE7NkfRMgej6WeDMqbQmuuNMntNbO5kIzuPHGmNvFFjN\n0JAOqzYvYAVEd+tO/TWZIC8RcRWvKnF1rm+pxp1p0uwMmol4mgsv7gooKt2j\nP8MRCyY53r0bVmazGR1h4nvsoTCh8SmrpP/5+ue2rjYZPHK2CRc/zWybJAZR\nQwZA\r\n=zQT1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmJuKdgG7H5kVX3NRzFDfyRvYqQXU+0Tg4nJrjcEleYAiEA/yyj1cOmyrAe4gftjQW8jw/mmMPooV9nMIaQbyy3XPs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.e539904c.0_1617904883367_0.08877962366571657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.a93ae333.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-v80a3BTTC5qaBF3f2wTfEV9mv+kEzAHjpooGe76hcd3yDLP8FV4PZdCX12Q+Gf8sSw8oqWEvHnXBTk58IGFmeA==","shasum":"f8e9c7a525d31ad1f22d78d687bad019a3777d47","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.a93ae333.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLS7CRA9TVsSAnZWagAAffEP/1jvdJR/+h4ua9NwYj91\nUsCpI40nppCl+4S/cUTex+q5xRrjvHLRL6Br9KKTKQj+dEAr47TOeLxuCex1\nCdARNzeD9m3wQCyARt8NNxzXu54F1GNFYcvEy9+/qEuDWYJtdViA+HeOGaFw\nD7mPcLGhFhaS+qIFysyqHYCSqD7ll271m1ByN8xEwtXqasa4XBQaWA+UCVl2\nffY94tl9YxUbFtHUBmDuVOCllJ2E8W8C0YtLZXHZUW+WFBgFZdbjwre8uQnm\nwW6Ic5f1ai2r4CiJDLj4CPGlO71ik4oiueXCAI4TA3lY7YPinbnrqII9gERH\nmF2fgXxd/cziAPHBKHN7l4oAWTL2UUmBOlul2Y95j8hBdaz3n6PICgAbQzsE\nlSJS+EPoAVI68ya1cE8xkXZQ3mMWncmSDdSjHnqG1Jtqv1HOVUT6DZ6Jo9i5\nxO91/+MGAMrjlIFaH7UomRG0heSvDoy/+o3u7IHS6uHQjvDmEMTq36MAtF1p\ndiFJmhjSBewD2wzWZmgo3Kl3HxwTr1ZICdLf5RFtfn1YAEqI24zGauIliXUJ\nx8EWimcGF0QWTBA1iYZ9uvBLnRh7xnXTNxHzV3u3EiJjJc6vFk0G4zzxAx6p\n+O6Ool1OwysT+Nzk3wEWPf8qY9230grpi4tbCtZ6mfRSeOQteNVoBUmOuVBj\nMbRB\r\n=gPL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEY/4KOGNN6nawWMTsaAnyJw1jRLUINc+1JdnHq094gSAiEAg1TwR6fgmEzxJY4GE2OUdoP4MX2r8ji+KB3yIUblD2M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.a93ae333.0_1617999034770_0.6389393179117744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.e142c144.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mwnUWuIv4j7waSFi9zNz74i5BNIUssVRQONyXkT96N90+/pQjfrQiIdGBXrFNg7QSirObpvWqEQl04KinllDaA==","shasum":"2aefa902e2709cc12814b09e941c968dd6ceb8d7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.e142c144.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF4PCRA9TVsSAnZWagAAuccP/R9NsIIEUcvDfa4TZaBy\nmq7/A+abccBCwJvjpqEnEfjRJEUuY2oP8JiaIq1n+ytERXeLChdDB6mhCI3f\nY0FgMxhqQxgjtIAPHyQzBHbaMsZz4UNntiYx3rjwQkeE8q49JI+YtB3g9OXq\neP+yIHxXh0ZkILrNGg9a/kVQgN+Muote7ld733PfOHU8nzFIUN9gP0vccwSG\nkdf/w8yUCJfXCbdWsISZEWzkl7IIWaC1tLt5vJOCWHYjNc9hWrhZEOzbAq31\nQbl1PRACMXFMoQqSaCl8zLIB2IsIx1/nIg0TyAz/B8cBJ94P0ARDT/iOMge6\n0liaONq0HiIbe0HH2XcfM9ANkp7rUs4+NUA2vgpV5EfRupax1bQkNHdC7ckB\ngb3G2dpmp8/AvqtaD4Nhm52/cTfJlvukxo4C5A8xM9OuRbbSsjWaUaytLg1n\ndXvHbSIU1f1HEACs1LSVSreDS3OeKgJgONOnMm+zPCMG9TrTm5RCgPk8Yjch\nK4P3/HCEete1d9At5K6FnvYqsIDdc6QWwBrCQKXzxJ4PtTW5132IzfYk0UUd\nPWcMa+IjySJgm1YdKr/FGiFEbYXNlLDvbm9809dWcvCSnHExYOzjMD0azN0h\nrmDnXIokDPsxtQ0yRrqOBPn7Ox+/qOZLZ4IQmoREOz2TlnpRSrrsXtzSyB60\npwVY\r\n=hq2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuGvvGs3kjiw5cAid4aPoY+2wCl3/Y1FVVMydcRy9eBQIhAPGkNFdLoYp3MfmyzCGGq4RX0JsxW7bjmyMKqWNP5wl4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.e142c144.0_1618238990895_0.23503904930878483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.382d7eb0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pCUi+gjzSvnm5VQh5/LIQmLhwXMZZKMF3psBZLjsf7b+F8BvKfckAAOwHXD2z1XFTT7RBh1Q+KJ4bbqhJcGKEQ==","shasum":"601b24bfb4d0529f37d465368070c8a1850b1bc9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.382d7eb0.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMP5CRA9TVsSAnZWagAAlU0QAIFl1xni8tLJuq7Q37rd\nNVVKw+/RNpureFoppM23yvNczmw5TaBgxtj19Q1i7f2jfMPXkqQ78UKZEgn3\nPI0buE2ZlCGkEKwXtT44me+TFDm23HiJEMT2MV8VJ1Fp3rrl+b93sNpHRQCR\njQaU8aMQU+zJgxrw2txx7hIl9Ta0gHWxEBCDRXrVhzHGT3OIL3hWtDVDNVkR\nQWPdEkvvCVehJZ21rcEXQ52M//+jQ3Qv1Li1QtJoaL52EFuI9P0WhEFi7+UN\n2ugu2BflNgWCw2vhmpRXhgv7GYhvpgACw3WH49yZkmzGRLQBNBdvj/lC1T6B\nXnGlwX2h8iPm3Dpnsg76Y18yUj9s72LnR3DK9Oj+N8KEDM49c3dqrWUj9yoH\nEkNXBgvx2R6g4mY5jv5O8D64tD3nOaCtfB0EnWPG42Grp2T0TIiiOjU05Fis\nuQa20VUt69sMU307LEr3mjokEMznfHD+FBkec+tQ2IpiahJOInXvIbMOfdEZ\nO8nIikYT4elKm4rm7QZljVAnmUC80rri6AOU2jxvd/BCpVebY7n+hTH6fBil\n4OzMSJH2ezUz7GmKCvmyxDUETIyLtL7qnC0I9ZB+nf/3/iTSMqrcFUgQCL34\n6DgdVcsTpGDOjBdTlDVXv4I87Hf+vbngHK77zFQKYDvu16pnP5MQLzIqcGjD\n93O6\r\n=VWX8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmhhpKDK1srUA1KD83Cdmj5cEql64stz/YeApVToltGwIhAP+vav69AATj5RMoZvyx/ceAzEX1MnqIJilP0OQ+jVOJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.382d7eb0.0_1618265080806_0.3955139416941986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.b16c7885.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-96b9Uq99x+qb2/nSXVqal/0fi7tNwPqsBfiJ37gSGPHTX434UrNIhfZv5DY2xEs/2JhJnvBhf/+A51V1Y7sYBQ==","shasum":"940606e34e0ed6dbc79d30e97dd1e80b842eef34","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.b16c7885.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMvnCRA9TVsSAnZWagAAKFUP/j9pKXWJOb7V5kGUnokZ\nZp+f3jRSgttF53VfXEUl1qcBwDgHQjzgzZND8fkku5H3SZAhfhTOWhNxOaN5\nV393axoHaeAW/CkRxhLphm84K/MagE7DD8SYdrlifHF8dfzvRSymgVEA0t74\nsx1AWIC/liPn/bddYHkXRApd+qvGXO+6pnvAG6pvqbZAHMs2aabZqgfpsqlL\n2kuCeE32CxSd/Iasq8ucIoSVvIa9EorrD/cFqooF6bZqCanvYrtXfkBYhLpE\nqMGevXz2lsYQupBDQVU8vDPCCu+N8M5+VY9xXqpNVsdgh8fRVUJvVcJ/OY/u\nsOJC2UBfzOVZfnl8KsWds++GJgyceTDzVo4/EEmEXF1+hfeCPZUWE/rSHgUW\nc++Q6klnJghCWDlD2I4QfhIy/r680gWTa4KQiOMMpXnvufPS4kebjRQyeCmM\nROYzty2lL9FRSDSw/6OL382OatXvfXlabDkWNsS5UgLtmU4KvkGpmjH/oyjb\n5iS1xiTUn4BhxnMjB4BIaxI8lVkzreBwRJsyXvH9qsHlidAMOxeiEO8CGfEI\nCsurXhn8Swl4c2t17vrAOR5HbskBcdHIelH3iDrsFYFkFcOTbJRLyB4sLWji\n2hSEv1ktNjGg+BfUHfDBDhVIjUjcSCZ58mAkJk/FJp4xDxHqD8KSC697C8RY\nM77h\r\n=em+I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApbLsDwp92jTP5XSv6sI1jVZmTcbCjIO4ryXlZYuK1cAiAD8jaEAXB+nH/hMXD9rtwLdTEOy+TRMuxriOlpzyawcQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.b16c7885.0_1618267111123_0.20551050965355655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.0e92782b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xUDtLhL1E0L0WB9+uvsbv5Jrp7/9mDeSBHUnhXw5nXCaDOCmNXlQsxdudfpHpGXw+UUQcyQImnF2aTh23mWltg==","shasum":"cce3bf493c49e5d55a3ba561c24400a766ad81fe","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.0e92782b.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2DCRA9TVsSAnZWagAAX2sP/Rmy9xqgns6eKKzcVhot\na+2O0q6TBEsk6b4OFnaYY8HxZ/zx4D1DV+XMrPLYbRryc+p1VEozTLxct6mB\nRPmAy00hFynfrZW/FMPkC0uPFBNMc2syI8P916xsEObOSuQrZLye6gpU3pdD\n44OvyRT+HR2qiS/CLg5Zwh+RGJpTSk/H5lfjpnQh20wzj7Q2fZPi7UcouQsK\nhia43WDG31rb/KjyUb3F96B5NBgl+BpAfqWZOEmOCzYpYd0C/hIcosZws9AW\nd2+VErnwGrqp0gU6WAzkMId/qg4HTb9gPb8d6+gW4T1MrUomUvx66Gimgf1K\nUPX503pPHu74yqdLrAJ/UqvqJiY2ZwDvNdWTc+KFmqA+RZ0ViIaq4WGunBwB\neWzl6wL5dq6kCi/kMZdB8k6jYwbLFIMEDKbAQrWRBqiNJIGM4jWC1ZdlX2NU\neBJdZTYsjuqBZVnZyU2AkcYEyohYNF2ztWNOd/JLOwMRnzmRlG8pwJWBfxlJ\nnqKHdvzqtTz2q+hNbP76De103YYr0JvyuLksH43l3I3+8JZTnOM36JqKqF/T\n/Le3qvSg8ygmmD/EfZluqT7RvKUAPzOOgtMxstfW9nZVDYxkJEiOaQRG9UG7\n4+DJ25tuiCFINYTpN+n8OXGvkDBVGZVMJp1JlO06BYC5tTACm2qFXfzLpma4\nPv2k\r\n=KmEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJj597HjlkbYzFXpxMbcTmdMCXI2371/s7omDCjL4hLQIgI5X98nsyiw6ah1JHBzw2I70Amn+1nTQaZhwxQj/1ToQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.0e92782b.0_1618324867421_0.4915070413174165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.70b3a072.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+TRBoZRgOr1XeeUO2xBp+KnDHNCTMJabtONM3QfHaD+REYnGBI9+L98KP8gUPAZXpOEEbuQ3ytftSpYOMnFNdA==","shasum":"ef9c336d5a3168cc06c783ad089b4e2d8976ea44","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.70b3a072.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2vfCRA9TVsSAnZWagAATrkP/1mWEeQqTiPUyMyBNLpu\np8vqO/wui9WvozJlQvbN9URM8UMa7xqkgYyGo+by3CiIfjFkYVNmouIJ3IEH\n7wnHt174JZazEWQqCUNqTM/jvDRsIxecSYd7ch6HCF9fsZjVMoBnBSMxXDIg\nbUHrOJ5pv/X9LXBhQ8lcGZGfp4HL3NdBitJMaEts+nejGXeFEYW6y8HOn11t\nXFBGLDOTg2jbe7Ya+ahJ9DFYfH1l/EdxDbHYY59DD4QjotzydfXPG2nhmh/3\n7QhGClNwi0rRZLruMIvozB1/GN+/FWArSbRVJv3cl1UUdXiAcuMfWdQYqO+P\nsiX5gEI4v9li3/zrUl6qmQrRNQ5JA4F6CIQaXdsIE5ICbzIer+IAi846bUHh\nRdna3Xn/SvM8TT8eWAQYDIdaUXWr7XfmQat2Pi5DhicLNwjGihUu/NvARtuO\nnvzXqpNjAEZZjbrHVju/EfuLcH51+aC3A+s8yVy2oT1yVnO+2VvUU3yoA6SS\nYUjqUKEJZ3dU69DZseGu3ILnmpVmzPA5OnSnh2Sau5GJr3ba20xVO1sAxtnC\nLKOYfsm35BUGPM018EztQsWmE4kbYEkBMgi1s15XsDdrZJ49YSxtgefokaWT\nIIk9jKS7wlIZU/K6qwI2Y+CuTW2rTcvd9v0IfGqw1/nBF5Se9THUQ74znIuE\nUx5G\r\n=IoWZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVON59HKgUdLlB9fobrLReE3c3jLxhMf6rKt31gFblzAiEAt0a/Cw/907GUen10RgVjK9QXDJ9QlxGlKmD6fQMVI6c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.70b3a072.0_1618439134464_0.9441778937663261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.ff79b092.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a0/gVnCNUyraKk8o7a0pi0hADe7NFmhfb3kUbY6xtByi54kIvys7JqP9ysouGzJKBl2N9BWnfOinK7lxC47bBA==","shasum":"a4eb3cfbea01990a83931aae27a79506e520069e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.ff79b092.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIz5CRA9TVsSAnZWagAA2nsP/1gXulVf+LXCW9yzSmcy\nj/vxx3Rz1S/J3v8wsM1nChoxbDV7ZapQBp1+ov9/cmp19HKXNTaAyW1bnGCk\nl0zAmS+0qQhw+2EvMrSiyEdG+eId/srkkUrnYGvg8aphvGCT6eKwN4Jod+yl\nGJ2u36smwADMhZ5vH38i98uBQnMbnVUrK1ZZlZz7inwUtxxTVBtPd8miHCPy\nq2gklVQ4plJmoCom6XQ48Tld+3nQhdvI8Venf+dGCuuE/xJZnfjflIvkLnpi\nUCK1FxcKWtTw4LLG8Q36n/JY3GlBpLM78O/xo2zdiAWcTWgHa704M/IWYQyf\nhGf6B/yzcYxm11QkFf72n47zk3cdyrouF1zxr44Htqrb6yHXyrmwxm4nnp1J\njO9u1tzwOzaVCukLmv/4WVB2ybSWZb73FpI0Knc1HN//jaxS160EhqV8Bevl\nOVtgPQcyZnsmfQ/ix4jUjYn26zb14PfyB9f9A26oKNIkod0qqrK4bhzxUNRt\nli3d3hi0/IuIbwQV0dahgw4vOI/KoO0y5Ae+HupmFBKeNiti2Ip4hS/reL3B\nZtqkBw5heVj/YgDAwf9yvD9jqw9fxqpTwfO+do1QUJscifwJ+ixE0NEtlNtX\nPXWTP//9U1O59TWBUC1j3AW1iJWdUQyM5kecTiAZJtZ+A0yQ+FP06VS56HPl\n9lG8\r\n=IAjo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmyWWFoIfB5vFZGMp1J4UaAO8S0Oj7Vu7528/54tbAcgIgVBwaX5CJjpgGJ0jzLwrZR0c8CB8uT/LOKn5WAmJl29o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.ff79b092.0_1618513144921_0.6728953413388741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.f35b2fd7.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jeA/m9l/bey76pv71ETHufvlI+3FRQR+UCKvR5zNZVuZQgN76ztZGn4Bpf6fhx2YUOrGspRDhmf8MguuGhp7aQ==","shasum":"bfc3b9075f90acd22ef37049e67e15eae957a3f8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.f35b2fd7.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI90CRA9TVsSAnZWagAAMZQP/jTd9v98yptIE26Tp9/j\n9AH5BFO5pi65Xg1X0zXzwgyuG5ROijmvSdJzymKfQmRXqBp99wJk1Ziki2OQ\nN9yiox6Wa0dcNeiIkQyQ6K7dRDFBEypWKWtowxF8o3EKAqn662+HrBB7/bCJ\n9MBIihqEiH881zUd01Wz70CSC84Oj/gRor+ztonlYfyY71+stvHXOI6j+QRP\ndH5TTcb0Afn8VfeHLqUg+cruPGn+usgwgzRECeSnIISNjbls079DVUjto0zb\n2G6kIcxJyPGbi9svOoW7/uI+sQiOvmljyQj5W++xugLrZ10vo02bKx/Lsj89\nCzs44ww7rUIo6oNFSvZ6wZ0cQtdvoEZUogTa2c8Ce/xLRbErSp2Zlst4Z/il\nOqA4rxzHMBsCH6jRvQC+O6yxZLr0WdPAWe8CcFrCS9EQesYa4GhKMlQ6DNVx\naX85XZzyN2FUON2Z3aH0Swu9H96lnQ1UNFRZSeZkJt2Kp2vUkBWcg/JQEUER\n6uzH4WEpx9rswhd6atu67Sf9mz+E1rN+eHHZB+28ZqpEOkhp3HpSHUXq8oM7\nJpPA4fumKuxHngzdgsG9WNpgH0/JB4O2/l6dAuHeWgkflmLfVId6ZvF4BYrZ\nlLViaGE051TPfCx0VHZtjnQWsuU9RqtSZtMj8khflsJfOfi4xlt+Cs5J0vYg\neGa2\r\n=G1Xt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvz6p1bY2Yxo/tIsM0zbMOb/QZuRcxkcpGgLDzFazMPAiEAuzpn03JQ+uXBOVjz33YrC5cKXIVYfBdokmTLkDJVwOQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.f35b2fd7.0_1618513780257_0.6551426638348186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.11977cac.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f342c3f4.0","@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RUkGl1dQL0LUwXNXyQWgWwmtCQBZdI3jm9DljoAPKAwBZelxqaazI8KqPT1SjcY/nJSO/D3ktAph/nPpiB1VXA==","shasum":"9f7750c8b3e9a29e22384c8e265f77dc4e0548a3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.11977cac.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeODyCRA9TVsSAnZWagAAk+cP/0hGMfeE0APe0qsjIsNV\naG3ZUEiksK2SCYFbPWhJwjX3+OtU8IEy6O326nSmh5c280OLwi/cbRZ43pSG\nHkKXJ2S6wwQbiaD5aKMS8Hz7valKC4ivvw8+nKmBabMgfQg6F0YGNeFcJ991\n468BiHTpNUbM5Khc/oW1myr/HW1Ny6wFIH0AhntmSv7j9vQq6hxJsEhkF5uJ\nXwRfIU5DU8a6NEMgwE1o5zEbi7cYlwK13Pn4ekAEf2urkKoBbCXNTMFLYJxt\nL8i/9VQWFducX/9FiPQO7T/83fCRYJbSc6X29BWgxH8caxdO+/Xk23CNZMv4\nNz25Ou9K4AgvZz6tOnTqwtUzttOcWjDX/pvsJttv+o4qrQ8Z2mGkK4G3ASGJ\ncl7Ymp/Cw40FFSAZdLI5AS+xycEAhFhyFHboDhqdF7DQMZyI+Og1sXb6zeeV\nGwH/kY30HhjVSEnsFJcvW/xNkQS+Gy+q1FQvGE1bQM8jQHyoM7QxYtl62po5\nWkLoaKSJbmVXtvW+CFJLMRYZ5eTpoUka7E6HmmX/kOl6eMfVz3UFCz2yY2Jr\nwEcODu+h1AMZKOgaoKvnKEWSLLXC5/CaEAz7gPQ1IDgaylqYy99ut3n111ih\nAZkYWhWs+Yw/yYtQ/DYIgpKG1IQ6+iIU4sVUMmPCV0+ejsKe3l1H44+tcBow\nPbQF\r\n=vH8C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWVypGiT8mkNVxM/zhHahwFNEHOkdOvKxYw31PCB0WOAiEA8gZDHbTRYljFg3X6mZRMZ9xQzVF1RofCg7TwYKb1eU4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.11977cac.0_1618534641737_0.6425368943783254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.018ff45e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.cad489689.0","@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1Cm/MvEMaab/KssxA5nUHv1jYk6tNR7xjVQGRPxO9csRTpCAcRFbWQ5asSdkDO6tVDiTSBsZSRAF+PhIbg4GRA==","shasum":"65f4819f059aafe94108e45b1d10ad1e63c9d961","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.018ff45e.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf2rCRA9TVsSAnZWagAA0CgQAJo6twRcj8QWH1SHlUS1\nbt50vaG9V4iykdsALWwBkIjHgIVNYunWweSuTXp2B6JRfGUN6BnviW1nNzPn\nn7+0CMj7PNILftEPCl6VvTOISl3NccE2xjCpXB1D0mx8HthNFhZ23OPrYxs/\n4Tn4A2Q3G36UboZiGime9uPJ+G6/ZXXUQixlyRIF2tjNCLWXm9Ecfjym7fsW\n33zQ89/hqhSIxt5idMIwtM/pLkbexKb9yIr4ZtjDsJdeFs6tUtxI8rXM4r0k\nA7RAJ1Q/yl1N+cUlTBugGqHmNO31JNmnyXMJBY5VfNMhhxIK2KCGlQT3JQB0\nP79FX/LIyNX24ify9LH8MRjD5FbsBMVYGwHfd+guCUXM1M+XaJqKmaLM4ssm\n5GgDW9ZYGDcgklFm0KliZmQ1LFM7euh9uqFdp+SeKOPWIVj8jRYRbacvs3L/\nWqCiwWJq4HVYGEUF4PjjYHpdd0Fi1QiLdMOqpb0WbrH42LCMA2Ewo/0CupVe\nlLqEQ8E1kPxPqqO/M4/dg2Mwl0HMGhSkXVNIzEN1Rbt95aO8TtJRW1DkoqkC\nnwnphAMmPHe4QCdRvUk6VemumRJnXBQQl8bnakhKg8TFdGvFRUAdBMQPh9yD\nnfEvSlfX2rGskJGfwSnKFaYPejIYFNGngJcdkZ6TI8/4BE9991VvyeCLuYJE\nmCuJ\r\n=0f2a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtOuKCJpegAUylOGZx04N9yGe/vo6Uhlmo+BSM5/g+rAIgSV+7LNQhCpoCFDyakaZLp9Wa/w6FpkrCQU3Gs6uFn0M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.018ff45e.0_1619131819175_0.026528013477653545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.c99d1fa5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PxuPSq9sc4KwOhtCSpuMZg47o7LlXOtJ4/529VZMiM+WBWSV95dKmytmkzuYvBQNw5p+EjUs+O3getx5G5Y8hQ==","shasum":"9763a6416f165ef0e8e79edf36a5f233c11b62be","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.c99d1fa5.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxhyCRA9TVsSAnZWagAAt/cP/07WuNnpD9geeFz+DN/w\naYzt2fgKIoOCm3FI99H29Sv9gwnCHbPlYXkgF61uLCiWokmK/KGSvMoV+kZ+\nTGzwmYWwZ6Z+Z8j+Qt7YZoGLlTLLWtvep7BaXM3sKy4wIwq7djnliTt2VmAk\nCm0pb+grNwSBamzqLZwB6unFPtJoTjNtifj7Eb1i150KRC6pu+GEV/JbFR54\nLMkWeKcmbL0j8W0snFa2RJrOESkwHm4a7HFangWy3se+5eW9Ypa8v728aYLB\ny3Yw+BUS8M77G7oLuv6xtTG0yJgHcePLyh9qjtPlNwWerIIoc1+kzOhjrzIz\nzqdfKSn7n9WrIVgc1iytiirjZCBqI1jQ+Z5m1X5eQMX9ImvYSJt+ckPAhJ7X\nk2ekUAm0V4I9tD8DEoojtx6Pk29t3HMAh2/82m2Yr2VOyqRzPXAaWAs4LOkA\no8JNnx2PCw+xup8ayLSMt1lXtiLH3Kyo0qE1sBY7R0LPxIGsolHEZ0mcgiEn\n7oVnN/jcUBn83lkN76dzabFdWjvOuVvtCV7YXImwvOFBkyNPeXUOvg6moSl9\nYXEDgnTh+W+DYqtfWE7U/vmwbxBqNTvzgyvvxwFcCYb3yImNUBpf7tgPGnf4\nVfqziLnAZszdHrG6h8msMKOm2wzgkZMVvghU9NBUw5IfOENEPh56ZaA3GURR\nWPQG\r\n=3AxR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEIXCmstcM85CuNH6iRzIVR1Fz+8eRm3+tydrsw/Nk+1AiAa/uUUiO33h39IaibgXSJefrU9kJSCDvXHISH1r2rZhw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.c99d1fa5.0_1619466353930_0.4927070243105316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.eea9b304.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B/4ivhPwhwjtDweli1reyASDajic+79udEInKof/KEVfdqXuTj1y7RI2KdJaKbwOcSC5FkKQjT9iWqwXugxT0Q==","shasum":"1b433991c0023e483f1b70d2132863b35db6a669","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.eea9b304.0.tgz","fileCount":16,"unpackedSize":411747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJWrCRA9TVsSAnZWagAA5nMP/RZId++4ruFgPXpJMz2c\nTO+iB+fk+VEWQtobqLoWC+W+ZZuViK1JnbuegobhKmsis7NTkg+hmFf6maD+\nEvJECDpXX7pvZhNz+mVe5oTkGeaDv6QBNFH10+zbJX7+lOQ0GvwrdTgvGJSE\nrD6zC9HFnDZIj/iClTHwYEpnlLrtkaxwiST8fIrbBzyWK2Ku6a59Ps/rVn4q\n3AcfemXVcaWVHduvZMlmpdJqf/DDWa2fB68l1vBI93lsTSUxF0ahp38W3cgX\n3npexyKn05QN56ZGbyioNVLLhfiHi37BvpsmtHn9ykZ5yNwbNQY2DiAf3Qe7\nrrZgNNhDU+F6YjBjhi0SId+B2FUvJeKC3D+HDWxeS18CxbibG9j1GRL8nSqI\nMPvcIT801ihEOFn/m4awjztc7SWrvHjmFzBv4mKDOcMGyOoPI+OtDk1M8O1r\niHekVb2/TlDE4GBLy6S9iwm64wkBe3Xkj8nUsBfMN1xbJxPfow84CCLz5+tm\no+kyQnnn0jhoG1J4GDp4yc1kEwDiVoQPpMnOrXV/OUi7suDKJcgjvO7J7r1Z\nTFufBbRlXfx+YQ0KVZn1Gn7z4SeLab5hb9py9Zaup58ajGaqCcZgIwTMBjnV\n3H1EnqpnQnATNBue8DRXx5Nph8s4EuhcYIEYIDAej1T/TR3gI2uIQAldIHNn\nXpTq\r\n=iYC6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDylnP1IbXvw/dS1fwg0WcD1SeVDnnhXKsSgTFONbPa3QIgZzliU0CQezz4X4ALFRcNpZDdAK7lHxC0tPLmJOqQNXY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.eea9b304.0_1619563946771_0.9912749057618817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.5dd85d0c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ImPrNA3SzrlRbf7kWt0s+WrUJqNoCWDO7uP3GsJlzInMz8ccNcaV88129+QYVh+WLXFOCXAywkJpJ6y24PWp1A==","shasum":"96c28c94b2bd21dc3a2b8b3652fcf39f7cb740a9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.5dd85d0c.0.tgz","fileCount":16,"unpackedSize":411769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKeHCRA9TVsSAnZWagAAQ+QP+wfVZatxAdbcGn35eQcF\nb0rIfuo6+Yn93ovuQiK6Xjfz9atks7XFuZdL7th92XPEva2AKE4GUm0r0StF\nIu28ZUdztzxhib0KPO1sObkPHiBhFyQQ5Dmj57d4PEiY5F8zhr6SdMAT+r/U\nBXAVz2RWyAalq0NQBNstFgVoyLuCqXZwVogviK+SjFFJj55UVEhtfBHwD81j\nkeL2LOSn+SXMB9sno2bxlS6UPk5VnoI7NMt3xH+qEVxN4W+TLrFj3KIFAvvL\nYjbJG9THG9ExVUgOKZ2TDUlHJZdaeA+F2SwTSLMmaOE84sCkh7p5uIGk/nuk\ndbP7aawlLu0PfrUufGjt9gg12TEgEDmEOxXBroeHNR/umzItIc+Gw7cEZEdr\nxlNL1PUvsSmlwj9vH8kkK2cQ55GOH24JqlVxdojml5N3FlB913R3E/+vGSy4\nsDEZ/SvHvpgivGkQc5SxMLS4C/N5IXOHB3ROodY/KX/itqzCNdW3QpYu7C/a\nO1cohyIpZn1ofPg79+6m5fE9A0ZSbR7QO7JT/mGr38FQyJtL1tUxWAjOgsti\nxzZWKViBxYYm7e71+/rezCaN9DRJdnTuaUZakrEeS7nPrjERcmDZqtJ+zlch\nmdNBrPjldgtO9Wy5714+1NHZf/9KmchK6/BYDIAULWvNrXy/oAkqEjakAtHU\nlpOi\r\n=Xzok\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyQgmZrohun8IigIkyzTb2wSnq7hBEWMM8Jgqc3qv4yQIhAMAUoDFefQmUk5EsnKotD6zYTagrcdn1kTaY+adlCcua"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.5dd85d0c.0_1619568519359_0.7572041915497514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.cc813cff.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FdFKVWOl22kW+548HqTCf9vsrRPNY9CVRKEMsAvdYENAa1ZwmyrUIomuanSdr2YUepHg2V2Gq8j7540ryWIUWA==","shasum":"d4917730479b33db17712a2d541ac289e353df33","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.cc813cff.0.tgz","fileCount":16,"unpackedSize":411769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHQvCRA9TVsSAnZWagAAIEEP/Rb89Xi9Jtjlm75UE915\nzg+Ruenj16LaHDOfJThneh/Brn/1R3iKVCljD75C12sykILDg3WkuVc51xot\nF2NAdN4NBY+kUyWP+pT2gvh7k3+0fzuKzAnTHnJcsv5cROGPDVksYUJWjf0P\nmR+K8+qFHxCoV8eyT/oDITSyfryk04ZvvW3xVjXhU6aShfBrZRBsCbs2/Rbx\nA4IsOPOn+BQ9RAwHKvh9qzLsvOOLZUYFKdl+wo8vTstYDIiVmlR0hrUldFs1\nMvlWRlvKbHK4uMVQdZGk5WZdaab6bIZbmFkLZp3vQmWAx3bAWdIF5n+1miHu\npIMUzI1LsXhtkpCBOnNqllVFAWic3PJR7by5BTtTYWCeSywg4NHz5tFxQUij\nFVGH5W6awHzjkDYV7OYP/ywPUMdzVMtMBDPX9kPJBfonEyAUFSQ+dVPKIC45\neSZFi+nFRB5JfpenvOImVPHVi+eh2t0C15FTXnTKk3OxMWj22+nrds5KpB7H\nW0I8DnJuHwUARb0HZQI7mRvZiq4iFLG3sM21kg4EBHYWRjWgs67eBOqy6kTv\n6ReVbipvmgb/YEYYB13rgg7Z/rag+KoPQzpEtfuy9jtDTYrVP3TWTMpo8bOX\nftF/3S8EArbArjNLtm0DllliwljvZPnPbkeUblFijAyO45c41GYMoPtoifvb\nQ+M9\r\n=69kX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL2KbFk7bMRSJYz8JD4YPOfNiOk39QjFp/yqy5DLp9ZwIhAIpSJejIYoLQILB+erHqjpQWJ0/g0ctQlr2/fCK+9aRi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.cc813cff.0_1619817518857_0.4348355021977619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0-canary.0875e898.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qhSZ2L1m6W/6qlJUKz7iiKHjO/mRTYwsyim1MD2qpWvOJu2Uf0xFc/ZBk1T/1xY2bMRus+TQGgb5Dq5hikXh1g==","shasum":"4fa74e588f2abbcd6827e9dffa25661fc7a429e8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0-canary.0875e898.0.tgz","fileCount":16,"unpackedSize":411769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHYUCRA9TVsSAnZWagAAuoAP/AxXe2+I18kl9DPEmzmZ\n9DeMZFvpgwEIlO55q9UGqry+ApbhkH5iYhxu1XC2To1CQhuxdg40a0/ZqfK2\nm5K7UeUUgQMIcMhyxlbTbtB3//ZKk1/S7YPsLBklACkvOEYXmmEEfSz1BWwO\nsa7uQbvcyP4bW2WD8zi52lj9FLVxNXrXWDOcfjEtdwFXqgXFIPebd/g/YOzJ\nFmRdyHrcnqzzTV1XHxXcEmhx/BIkWzd5dAd0D1JkaasccXkH1BkORaC85XBs\nQn54BA4JKFIDDbq2jIyUbH9aP7kO4dqY+l061ONeo4SUHF2CkQmYtIuHR5F+\ndS6goiLkMtR7xmhm/9qO8rMlKAkfrRtP6T5BXuCh1i3GZTshDB+QvE9MTEDo\nEs0YgIWdHSv617WXtHNeZlAkyr+dIfBXQu0j8K3ZLpxVGj4wtNG2DokD2nI/\n74tDtUXI2AZSUtXhuJghoW14QwuEuLiFsFkuBaY+AUnc9mizdBL/hZj7ABHg\nNDC9elo4WfxBIqCXCZRiIxZo+xbb5YpglurGzt/u41XNboFiVXL2O8uygj+Y\npp1UlW+tzKLqsIkUIZ0NBJL8xK5/ql4tqwS+5u1hc05cs2kJ4LWPHQ0G0VTZ\nWPojtHHp+UmpPuggPs6D191xhdFJ4s0KKCbXgQI6L/hpRP0+EyLe2flQChSv\nhSrV\r\n=y6L1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDokow4E+tI8gU69alCAmtmlZBz6fVbg+sOwTztmJivkwIhAM1CR7VBOokp7+eTb4ZSYAB0BwBnJxFa0wY55bdD13Ro"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.21.0-canary.0875e898.0_1619818004379_0.4817590559447502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-elevation-overlay","version":"0.21.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-U+Ntdr7KrLG+Wbzfs8qWf+4d1xvYTh1ErwsVvbvizFmIKO7OL3dtfkfuhm1b6J+mnBialYB+4s/vYEioPSOgHg==","shasum":"3d3e9d188536fa1c497529dbcb7257400122fc8d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.21.0.tgz","fileCount":16,"unpackedSize":419707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmECRA9TVsSAnZWagAApRkP/3Pd9rSxc+7d+cDTaONg\n3trbkb8LGf2JAl0SdnJGDAltQ8wwUexHN2xcELpP7+KLk4tEB3UT5Jq7ga3y\ncj786qE/u3gVor7WtHLExqcNLmugHTniLHMhmig84QecCsVTqCNf0d+Gtf8F\nAJ/gcg6xmdOzEUuwarWBzFWuQjdGhxycCo676/5wn4pxQsG3uxPoR7CFuBRq\neNMbTMuhRTvm0Kb3UsYnSyERH5+g0z8QMJQ0dfRjTJMWV2c3ATMlcKL0cx6e\nU566vvsL0zbf7uMQEC0UNYrvkql6UUyvJvuW6CMqIuL7I+x9lSLojBsw7vxk\nNmdWE+4SgJWOFI5pKljftOULejs4eQC2+4v8ELYP4nOQIui1SUY2sA//Cn5I\nLclooe7WRJVC+KVe0HBukStjrZx6kfynfIWupfD8VDFgj8hHjo/p7O76I2HG\nFOGGiUd4QzDafpbOEX9ptlWPZW8yLaHQa3ht8oaAiUzjH055b3tXyKww34Cg\nR1AhwhZmnLPyeXFDC7CZ/54+sEYVjSBj6yMj2DE+st3huqg1AbTgCedrKmWQ\nD8pMIG/tv1JoOXUYSX/6NoXUkZ5/qhdEq/pJmTcIQH0ivoVRmpzLgosPeBk2\nONuXkFzCVuJLgiR9o8A31ZqEDZ30iq4CGsd4wpBTimXgZUm6guMa6p2co7UO\nY7hd\r\n=OSTn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIVSiqHwT/uARWL0csoy6WAN1f1dCEMpPJBgu6keEqnwIhAK3o6Bx64QGHivrt0EAUTc4PgfJOBenpt11hLyBIkuHn"}]},"_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-elevation-overlay_0.21.0_1619827075996_0.29214393936321126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.8f1e7e1b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HUBPIE5R4acxZKBRDRIriCgOzHJAIGnZGGJUexyBs9qfNXn5Ih4l/qmanQ/0VNucAxL2KfHnV87CIN2cy9tDag==","shasum":"c4ed8dc4fc3a880f1b822e396334ee85837cf0a5","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":16,"unpackedSize":411769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJsTCRA9TVsSAnZWagAAn+QP/iu/Tm68wZ7vyEXFJFnv\nB4e7/lK8hIfJ0GqnTsATvRg6dDfNZ4YJst7nBxj+rwHnDKRVROUXDKN1/GLH\nBpWPyECMTRhBXByjVC5EkT6/ChkWzrbx3kUkwvFXuADxxqTFyoOMt/lQPWem\n5hzYna0XlBk6rW0R/DJwKVq/ks1+Ke29ska1NYExL9clsDRWMWj8rTQUZSHs\nywWFtmbL2lb9bO9CLjRoqr4zSeisZU1mSSzBSqxZwZwuTz1AC26jm0kw0Umr\nmh8YRKM/7Rfjwx5vDKIX5FR5ZOlTFTbu2PyTOwesoLCrl1BJPaPfmJwslf8Y\nIO1xJ/fcZpufTFj1df09olUk2jiM88t0moEBYP8Fm2bKeJyPZPA7hyA3K+py\nfbxa/5hPKW2qXnIpKByI4UZXHcUQaKJwstgjC4E56TQpGL8mY65Szcvmgr6n\nfw3FTeABufq5Xmjq2OUwXxoXf0DQvGkEOvOyDFs0P22nAUBMbhQxnluY72rf\nbkfVFHJbsxmjpWn1w0rMCWFEymkGnzBBL4ZCbx0MRWX+grZZrzdAg5gCeaFp\nJnbjP02vtjeyyZdtMIzavGGwlJC2H5XvsLIpuaawYvFitxoPUJC2KlPvInwu\n3jpLyu31cImZqZM51FFtPhoXSLhSNv2/fIjmP2LWnGM9XAPrf+5PRsnhPR+U\nUEzB\r\n=lUZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0Hddmgr+upyV1glzPUrQ0hQpZZGv3is6IWE4WNNJKKAiAzmj8nwZCnKZl8UY79Km5ToTMzxEw04GOR03QjueTMTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.8f1e7e1b.0_1619827474570_0.5573180425516715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.deb0e792.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ItW05krE4XcIyJPa9ixLpeJkVCYneLDd6CqfkjP69R7m5KlIDQgUC9lp2ysBMve+6kAN69qPE36Et4KesxbqXA==","shasum":"029a959edebff7ba9956524352bdafad60688dc3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.deb0e792.0.tgz","fileCount":16,"unpackedSize":411769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGwnCRA9TVsSAnZWagAAhykQAIE/+UmR9QpkgnONt591\nMROk1t3ZWZYXd0J2SZk53FGR0Y1efnMZOd7mGdmyJ2J0hPdAmQB42zdaAh10\nn0crT+r52Fxnk58aoPsyNGVNPRXUPJzS1mKgHTHLKtW0fRaCgGXm4EJo9pFK\nACS26cNZaW/qOfCgGi+eRxJxorn0T0+faZrzzWTmrFxQtHcKLpOKMJJLaRk7\ngzHWfRemfOF6yrnE3QO7PIJyr6IConycOZxG+x273BQSV4wS3WLX0nRrUdC7\nWxhXd2o5fqQ+8d9jeU2Mwh3ETYD5KvuYicFjQeEqx/OEqJAx8ZCJniOaxYev\n13C3ZccbWoBJ+0cl1OID7D2pir36vKPdHxKe+wvfK10KSvX+pbDbiucl4XoL\n7H6DvDRwrZRNugM9GBiKwwRGDrE8MdOrKjd400A3MxjFi4y2YC31isTgQKNv\nuF9WeEtDFGKdpnADGj3v1rYLoUc6FDrGtmWMjD1pJtKXe8pL5IUzx2NBq2ov\n+CJyXl/mNkTCHb81pRz2Zyy0+WPYIuq3w0NMUu31ph+UvBctIsko10rYYnab\nS3ZJFsjoz6C3PzI7uEjgvwrPdWJZU4bgRX7rNwiZDKvsp0dpMMHAWqe7bvsO\npK/iooS2R5dw/bFIf45E8mR8Rfq9LRmlna7g/uiX+GI7eW72qLPVtL9zD519\n+dsY\r\n=oSzb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB+B3EEvlaT0xfD5jbhdytEMYmb/DFpuMG3JCkbdKn9QIhAKOdE/7X71pxcJdopI5mVA3EzqFra19ow47OxcGnZfSw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.deb0e792.0_1620077607272_0.9674375652198983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.a3ff615f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HpsDFCddQf68DuPQl9ngG+OPlyw+SHO6VSrLIWyLtpxuRhB8R1CUrPWWuoedYXA8X6XA2JwSg6RAnU60CBHyGg==","shasum":"c0d7a89e958b47cbdfc232a43fead32a4a2f564c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.a3ff615f.0.tgz","fileCount":16,"unpackedSize":411769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHoYCRA9TVsSAnZWagAA4JcQAInObmZ7TeQfPyeUoogl\n/ZaNPanZbMuH0W4baj4afr+DScRC7ynimWDDlVosUNiQzklJ32v8vh07z1hM\n3Co8k8H+s8Pq9xWOb4ubWpVggTLYFFvh+hBR6QoMKA+qyy1PD48c6z7cpuvT\nnC3Oro9rvzJIyIHQ4cEx6fjbv0IKG13Q7Hn1iQecyzhEPGaJBCwCq2BkiWf9\nxhb79VfIU0GEoEYyabRjjGvmmbC7eoHJr83/x3pHwveU3zVDu7Bp+t86ECOs\no3TkRFtVEUdm8gC7/4VClolLcVghD2rZMx79wX/gj7IFMGmXMwQsAXSwUyoG\ncdRn1RHpLAOiQXipqdoj0eVERX3S+uGNQScu9fylAMy1pYrOue+dVdhZg1Zj\nRNFHvSMYL69DGd7ZyB+KKtHFcnv4cMKtWThLE9oKM6YuQBzMCpBuMeOyGwKv\nEJr5RQDJ2ueMnBZUjsV89ZvAaycMOLkdmK+BqyeXGxFvvBtQUgSSMTRPIwMm\nti1qYFOIINK0bSsBHjP+Fj7H/l3i1SKgCUQiwKyBUiM+tcmEsy+J2Dpowsa9\n+mCY6SHIRu8CyziBsopMmsLP0A6vkH4MzKpn3ZpP91HJmgKHPIHFJT9UjIcN\nUcuY0JkMLZFXpO2ylixTHDbBTtmI3jjVSwxkj6acBCC8dfZAMSNHqmZ4R1OT\nD9iW\r\n=3V0T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDLDk9ht2oveb30+OHwehegMRGOYF8SfkeDfwDOCsAIXAiADMn+Rjz4QAmkhssJ5z5GxemefZ+pew5rYFmr10kzuqA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.a3ff615f.0_1620081175688_0.0786283712243383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.948ccfb5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YZ41Jf3/BgCVGYZADwt6v7LCewqB56zIFXnZhRpD9eT0UsnkAuoM1QaWPG3TiWC1NPBxwbSYPX/9BNVtURm4mA==","shasum":"befa6c9e13df8d4b5680e8ae098ecf91252bff61","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.948ccfb5.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJDTCRA9TVsSAnZWagAASR0P/23FcNOp97O+MzLAoTJ8\ngi190bQgiCjJ6CN/h+J3u+nBmi/Frp0pK7Jty2h1mvVi2mystmbAXIeqtL2n\nBtbZEBUYmAfVb8lbpxB/3d7FK7Hr24vcjh8/eTyrevkce2FZ0ubrNMpPTyBs\nvaaCsm9kHwPPD5QasIpE2gcg3rNptSKIfNc1WhhJ7iMCPSjz5srJe9RI0b96\n7d/lw5M0Ae/j5GQ4u2NJ/I2ZJs6M/fiyGAJu+7h3TVlwwmXYaf7xhcZF6d5e\n6pc+Lnae9yZmoCShBKZUEQSr/ukwp9dUkUivnM5Rgu2z0AMBdBUf4V35vbfQ\nxj19aM4KhyocI7d1ZaGq4rtrUMKnZ6onBz+51MdFVgpDjtxl0u2Vro51t578\nkXPR8i1NpMiTG5N7/JcWxQvCYvHItrD+sFzVVsVllkenlFtJUMBv2CSOM3kt\nCiC+Ym3mLC6ZaagKU1NIsMPhJghpfK+rntQVSq9oTFy+adA3HVxgo4L2/Ud3\nG5eVVK8uxiD9XYjw0saJOlpXAZshT9ZBX4wAxnuWrKfBH65yDT4RcGRWzqaJ\n+pa3g3lytiQtzTbbpHEJZ/6t3XXQn24MHDK1AN5eS4JnYHhpf4rRnJURuu+x\n1vyQDlyWKWYO5EQWOP2jYGlhrtZoedhfUUBOhUjbhw/hFoCVVx3AQwrBZHhB\n3VZr\r\n=wcAT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyeDY5zmTZnJA9itg5kMMOmnrm86ubDgUbMZi2wkGEDAIgIYhJb02b4NocecaMCQcUJg45QhoE7akRpK3DDO6XpBE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.948ccfb5.0_1620086994681_0.8223660813509475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.9f8337d7.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.be999eb08.0","@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JkXdMQt+IenDQQOF0n1S3HyI2VfORUhFP6K0ZmDOhrrrRko9xENpWBs+EVVmUlRPfJXpanDY9H7d6rFKqwYDBg==","shasum":"8283847a6b46b08799e35dc9cc191939af291321","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.9f8337d7.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZQdCRA9TVsSAnZWagAAB/QQAJMOyLVxd9y8x3KZGdoZ\nQ4wNyeWPx3DEZ2GME5ABBbb7REzYJI9rMs6k8DANS6Nohq1iP+dKsp+3mHyl\n5rtVEJ5RsyA5UFxYnPoNbEJJ9Vtyg6JYRjfo/p2DUkSq5Y+HVMK81QORd3JC\nV8QlekgFx3ejsCjxsY0x0/hUzjnCo2rXBGW43QDXkq5GsrV30kmWhoMETClx\nehYxrlxZY7ot9DpSFmTQcLtJA4JX/N+ojk1TZZ58VFohuNgQ9yMoVj4wHlKh\nTD7wuZcRqzbGCxCsuoC149xX3dI8WryHD3+5nwkWBBF8FtisD2xwaZEEEvE4\npzR4shtjVITQiX5JmLWIs79sO76lLhH142JFV3RWXSVh0ZtBs4IhfG8fQnbF\n3w+BnD/wQPJdJBf5W43u5rMrr/huklHaHYUguLoBKcGJcbetkBy2NR6eZcPU\nYmMguhVFMnfqb3PTJ6MZouxJwBE/F8RlBOmSizjUmDSwY8dqxxE/yyrW6pWL\nbhDSk5P33r6qKnDSfq5k0L9rk9G4MIJgyJQDJ4dyjl9jWqzb98OOVgizafLQ\n1p4aoPkmgdhDUjO9r2nRfxBM34QQQ0ExTts52xxvNp/8Yu78Hhhu0wL+Hycp\nFhLFY7XeKW/uWdkM+mdnW/AqQ8h8lz/l1QbfZlo5XD7vIOIXQMtDLf9Ppegz\nt27A\r\n=jCXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJM6fCZGrr4h19NHOWMwnIG56aLF2FkCAr3+hc4SMxAQIhANORBmMYNwQz5Z9JflzKMXTtrUcAelhr4T1gFKev7acp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.9f8337d7.0_1620153372912_0.7675691013257127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.5813480a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.055d4f10a.0","@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y47RE/MjFzPiL3MkAQiyk9lHO4XwjscJ71CYSxgE0u1UaJY/lg1LukgHwP8pR+A5x9tvT/KXHTWZAPTKegC5/g==","shasum":"8317031314649142fbd03fda74ce769e57a7d015","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.5813480a.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuLhCRA9TVsSAnZWagAAkCsQAJKeYi+2wm4p7dx3QKCS\ndHHhgP2Swy3sXsjJjCV12dq+j8FrAqVLaEB0XdBgXMxX7j/pmjQt2ta7G+TV\njNalqkq3u9qto9ATcpSgokYVMCDZQnnEkvbDkj7ezGzw46Zom9fsnSuX5yKn\nupvE8ImCL6jKKeW74KJIBsuavriE2O8pmkZjXBdFl5PNgFPM4JF1pfNa9mWR\nDLyiXveDu2P1BlbeO46JxYnF3KdIEhV1qtK53OzU8J459yDkn24ZgkWOT5Vv\nqI+FwnE1jA0iLwxqQHmebHxzI/BzsZVYh8P9NVi5h7X6wn25XEkN5St09bYf\nPLPI+RkZZjNtRxPlOivFnlCA+SSt8AQkxYZADYm7fEOEjSuS59btSI3GW2MO\nmHA5yH83wQYYIU5HYF8ho6r/JrGz/SJRBxsAETEpRhgqo7lB0ouQA7ku1Nkp\nT/oCE7YwFOao75MwSSOrBVO0R34NT3viSQjdbDWclNsMXvSGvc+T/UUrAEuQ\nP1bqqc0RcmnlYQQZfnj6gPZ5AVZL3pJaXQUF9Xy/X0xQHveahP9qtKaghDdg\nHSctmgLykNn9xP1/lsVRPEMxEHDEm0Wp28NkZTWKFSh9DyeKQEve8aGNqNe/\n0O0In66U0fPfo5YYKPqez6zeWxQrc/aBVQd/O7GHTvJu0C3D09/coQBpv64r\nuBHs\r\n=8uaD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCOZyZ1FBnrgWdmR4CIlVWAOb4cZWXB/DZG0ilues/NAiA6vOl25Ekc39i4pw4r/lOiyt7FcCD4HatgnNFAvDantQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.5813480a.0_1620239072806_0.8295379143430681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.ab7fc1bf.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.03f525f9f.0","@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xvrtIWpe+Z9JtqSSeAlxWMc+1TlV7MJqtAto0AzWrbi0zOf168vN/tRfB8taj4G5VIeyPdu8Quk6Y742Hr6fxw==","shasum":"926c52a4d999abfb5ad560d69aa2c0577cfee0ba","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC48CRA9TVsSAnZWagAAygYP/i4/oZv7ybXp2A8BDb5z\ngxRF+hLjPLB3U7u2feP0j8beiPJfzJx/h0puGmFV4gqEQy4JXvDxu2VSGxoJ\ncLUvsDqQH1mTne8ZQynZ5cFVgljoA7qF5SwUet3Q9OpYvKplpgtdECkCs2/Z\nQzBQyva21GEOhoOEttV1o4lhSOJBgZa1o04PShQSq1iMWiGi7EjS0Jsnl2D6\nmDh45mCj/An7vLvg4JYbcQ5ZXRqGcTx1xyjeNdp+sCtIbPEA2HNfAifielRT\nIlhdbli53OXBobjBZxm1xdO4dGJA4JcRszjWA/rJE6YQD6ueTwAQSxsZ6iJ/\neiaH0uI7T/gpTFm5pPTy99bv3qOVhhkHiuD0DmGauqfguQwc+8NQ0B8VdXeW\nVn/HFIJDVjZg+98RI1DpoZqH2I1BNXBizbfr1olUpPtT7pvpvE8/lzqzFdLw\n2z4hztWdPhSSA8GnTvp2TjRoidMOORc6tHiWwyK73uu3Y+/UBcfPJz24ntfs\nW0cb6KiIjqxDbwAeTSixyt62EeQOTQGvzexVbFw5ZRVatS2iOgJM/uupDFnI\nKg5Bt/sqYp2o9+Q7AQ5Uyhnc1xY3ZB/PwZECMBBwgSZHMxHpUr+1Do75ngxX\nLGVwF5DAaw5dYgXEOf4LE4Kzvs9GWLEDWYcIhne1DSVYYZRgRL/h1vGJ5VWI\nSLg7\r\n=H4rf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfuGUzX3aLMDNKUx9OXQtCX0xfMMWyCeYuwiGPu/wLFAiBN4YwojqUJ0uxrk9YE3VlBB2AkE+KePH29FIx/ICReVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.ab7fc1bf.0_1620323899455_0.17457613162096375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.25693d60.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R8NRcDMfC0unhzigQJKDjOnQRvWeodSgmwIsZA+IFRV546mbJajZJLH9hLlSwHzRGkMbLHI6FtOO3+42GAVQtA==","shasum":"9a287707fe0554e64e5cc538e390c7a397f26f13","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.25693d60.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdBCRA9TVsSAnZWagAAyNIP/is3chtvTw5PR3LdKK/v\nhg2yPgenHoVadjcnN836QuvPGLMquH9UQFxV0MoociJC1xOtvSX//k4P+RuA\ngmjs/PsNnOeQDFOcXcrg9s9djuo0llvdvTzAEuf1ldZp+brjUYZSYpqwb+aH\ntM9asdA6tp9sI9LISwm2qQbsW88PKWdVIe9PVNOm2wrYfkrB3VbLnrGfChGJ\nEpdRU4ib1o+zbOhYDsytEfLkt8PWBstCPtwyqZlZsoz8MxbIH7+zEv0TvP5Y\nXkQFJ0b7aZraNwr+gX5bdulRrBNTPcjx+1J6ndItMoXWJIoEkTUogltEVXyK\nC5PNU7ku7xKBxhkKL+hcLtliZawZd7dhd5X2peY+wEiPH/1GH6DyaT4HnSDq\npuYW+4nTMQg1ft0RV3CquS/jgLIPQt6cfZW+sXL6vbHLFZWcQ7KAofoxVzvv\nQlBh7EX2Z5hBcUfmToQg3InV0P0vtrfudwvrvhu3o8NfG+2T/Y5ujnUvGXHM\niNTarE+ufPUaqyR5iWVu9L+Bj3DEB2EMRIPTdwna/QTl+RjGb+jA4uGz/2ip\n9nMMEbfB331/tgFwO2AgQ5Lq0ktGxVcstgtJ2Ikkcin2ODWR5QfacPwzfpsR\nRf3CUFc0thYIh3vS9IJMbi8AU8gjApVv3c3k9stoJQTtA3CdYSiucuTFcWmU\now+L\r\n=eKKX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAP/hhTgpgbTd9m4N7me5XKGEdjtaOvv+1qH8Myd737UAiEAglJJduVa4IJPXc4XQ1+y3ckbgg9vrqRidmC78CzZy2I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.25693d60.0_1620424512308_0.7713752470166659"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.c497962b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gFUB+y3/TYrx6+U7+RHTf6dork4WZe3RB+FOpbzrPVeiZACOn+rzCUwNZc42gMxrI+N2UiRhrcWRjw5zM2bEZA==","shasum":"64340703f17aa4f75dd44d63d7ea41a5e23158b8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.c497962b.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbzdCRA9TVsSAnZWagAA8IQQAKNgIH3dFcgBhHTuSSG4\ne/TlEsb+WoY9HX2RXyDleG0Bh2/geeGYfIio+tPP9ochhmlWsvQ+EYlR650K\nuEt/Nj90CvEsExX/ChciuQjjuW21Go35/ugdQStkxbMqn6ymK93WXLcHd4b0\nFg4DuTDtbQinHCGitNCZefqNLy0rPFtslwRd+x18ldkfY5XfIjaeOElJQbcT\nY4Wk7mz3/7qaUs0v1z3Yk54xRzx3gd2BBYJc8A8bS4ttXqrAFTLyrvLQgS1q\nHfzNgEJMJZAKlKvfCyCWDsFj4QMcaC/EdwMNXlmYn5vTBElGiWI58568OXLV\nBG6KzrGBLR/uVOJtW/Tnp6/vATc/XA1n+E5QFyzgojlFVOvwBuhZoe6qI4Vd\nLSXi0wQkGSgDSDGpihejMMld9useLyczSITTeNXbXEq6Rnmk4XBmJithDiBt\n+rNKpIRKiIPfq10IVR5AG4rEU6IrzyIs+6f7IWOKvloSDBG34EeBnNfonpwz\nK0/1bwqKt72pMJXpUPxCKmTderEQ6PmW6Vkxp2t2tpKwUm31pn0VdslsPm9Z\nWLAT37FlUEEM82wsDfYNYof2Dc+W108KiNGbyrk3N9UofbkDgPUgdCDekfYV\nHv6agwCGEwWkyaU/RzMHKp/oZHHDG8hSZJ8Z99Lk2lQNK4oQxSegCk6DRkAx\nw/qA\r\n=MN7+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0kCksZK9ZrcB4cHfwRkkSoq/zGnhdK3mc/oXMhc5OnwIgPiOV1gPRF5uXsq+1pbyDudZqveBk0o00QwcVGEaLdCo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.c497962b.0_1620425949125_0.23154512546956085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.e300688e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NfjsySO5cOuTvorjkh7twb9YpTpn5f9tt0LrwTB5k/mg44kEYqOTSqu9LsXpkibxE3TvSQV/3Xp/szgBx+e8fA==","shasum":"9440a25b2a67c59868298f87bc0a948727037949","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.e300688e.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb3oCRA9TVsSAnZWagAAtz8P/jvWa22pq5miAt4IDh+4\n5iZZlG1w2Z9EIHPBe9a/hY+0RShXdKPYwF3nS895+LG4RASA10YJqGt7JODS\n5Hp5hbVLJYmvSeWL5Ykw480Ir0W1Dr+N6i44mkG3lrbC3kS5QrkneYCK4MV8\nHFggUpYddDGBTgCz2gYwKg5E5JrQu7yhOANIUbqUZlMBWs7N+uByxglubx4A\ntyq+98yYWrqgbLSlJIDEfM87wDeJMNvORoz8P/vkgB/RRhc5KVNsoQDHqbjB\njLH5glHVFT0+/K87ad6zvvtfhknX4UR3JYyr0mHcRTaiPbs2IVJjpzmwKViv\norsbX01vlXrHPTWe8inb9roQ7I0hAaGvgfXS9fkTQFgrQQjO2faryB+uKPwo\ncDUWlpxJSyLRgrU8z9IzgDIJRQWIsEY83vfF/yHQc6srP64cAyLQPA8LwLB5\nbbX4/tRboiHeD7l4jIGqvOVj00pndSJwKJvmAJNBiN/NWnPa/FNNYPiIrRmU\n6a7K5oMl+mSHBaXSjb7fkWe/VI797+E+tyD+O6C9j1B5rh+072hbwmvQw/Wi\nZ5fTXm3pdxHO2psux+/c4ACnI1HuV44IXh8V/8iFBdANiQsXKi8RvabZGZP7\nRo96E+eiBgtRS+4AXWiE4MQzeJrEqioof4dRwSg8JdByodvH89BvBw5PwaMJ\n4Vqy\r\n=0vQh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDoSQPK4FcsfhfJzjgJpFlIokjOajtMSDNh4b0mBW4JnAiEAk7Yjkz7GCsibPqaJDt4QfjDIKY5BJ0zQL8Q8rD8rlKY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.e300688e.0_1620426215842_0.42160984499276677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.d70287f2.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X9bK9sNF9rssShPijsOpwElngRljCQL5agpA1m8orhER9NLiw6fEUJkSCQI2ztTUi8QuHPAsBLPVM+ivDwqgRA==","shasum":"c526987c5471c4c8c752e6523acf0edcbbc9ffbe","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.d70287f2.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYldCRA9TVsSAnZWagAAw2cP/ipr6Hl/KzgbFtM1KQzU\nqpLDsGF/yJxZDwewbWS1QOqFpJdwNhjEbPRuEgnXj+qNCVe8RrXAhwhiTOND\nGcGJMT2gEqLjXDsI4z6mA0rf3XSl8XcQzZi2nHfIa31ztAmxUkQO+FlZ67mI\nhF+Z3sG0iw+L5dNm2e6FWJaBouKwYvJnEq6FjIy28ap8F4ACYLKWM4nYS0sw\nQfwqgr+f03KxM+zCJFYDwzVoTnuHL4UcOjd8Ef+G8j8f3t0HUpxyg9feK6nM\nbP0OHidsyhgEmS+zkFdmr6Vu+p8lgDCr/vd/upXYMjPQl0bebtbny+mYSR1x\ns3XK5G4kSLYHNuFIKsqo96AjRErRRw+0mbr8xUQQEUePnBXRysiUKvNYJB2C\nUBIw3LjcULq7eo0XdhTTuXQ+mrjcfWo48sG2xIwRneG95t8+ysibRTOC9G3y\ngmbSwCY3SyhGtyfHlDIZ8JYK43o0nXyvw010m6EoXiUD05PUI7kKGpNGl7bj\n76C0cfMr3u+Zg/tTNyYV+b+WZDqe7Fz3JhvoAZYt5O/9IpjdvsYbgwMyv5Jl\nOvDT35kDKufm0vzRj64To7CnLZxWv0YHh98DnHLX1wC5O88FXY9cuZTNa/73\nMk8IxaKSUgbRHBH3t9gIdyWkIDZArc5DNtVXO1tfrdI5U5Z1z8oJKCbYD/N/\no5ZP\r\n=I0JS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG31eGN/Zct4gOv5sZgVvmMWm58na80DlUhFsNr6kw1aAiEAqyInkYU6TPrHrlFiIL1sFpE4TvJbrtIYvfGxj3sUteY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.d70287f2.0_1620674908896_0.39421917589949595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.02e841b2.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UWnEHJImyOKR0m++kp5xznhK/baUg/nWLScINYp0dab5fxylWg8YScQK4O4Nm6k5Q4dMtEg3P4V43jIck+uUbg==","shasum":"35cbf4ba7cb61163447b2d4670d0805c0fe0c346","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.02e841b2.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZipCRA9TVsSAnZWagAAhgQP/1UW8vstTr2RrE3wEEA0\ngSz8V1O20PUrdR0kWrf7ZCiQOqt7cOP/mQpyFTgJu8QUA89XKbZqjo/q4Hw8\nuT4YqppUQ4/cTpCE0EzByIOFV2l1bgYbzVlYiQ9YBAE8rewLpr/7HzmgIGoK\nMT7TfexQdramvrG7IKxojiemj3z4N8hf4pCFoN21DYz4NfPL5NAGtJE+qj5D\nw9+vpfYvabSy/ZlZMPoecdFzKy2P5cxGEwvRIbxv7E5jS2m3tvLOPMSwz4zd\n3tt7E7IYwsOxX1EuNDrrRgthFW7GLGZcFHaZ3J+If2kiPqG5V73u01OqiApX\nxzgR8z5P9TmYD+fSKefvADgprTF6YAWDxIq4j0c3Ljqb5t4Ps+xPMQAzQyTm\nhepXiiCfwVsUe+bzZR2N48CCoitAa0nCAgUfF9x/CBZWtTC1CGneB2VSju/7\n2R3WqxBiwBQDoNp1hP9uWSDET4Oei0iEJyoy2dUrDH4UN4o5I/73ydshy8iO\nMk5w/YjA1tsmDH3JtfmiajnJRIjeb4W4ftArnrzR9trYES6iuYu3/vO44Ra+\nd1PIbQnOlS8fuRLsrtQi39DfIJ+AOpu9urTPgMeFQLfcS84UGv/JY26cfOFX\nI07zZgRkMyYxaClQwqzTHOND1ce+aybBTTTk6DU0Ajq54vOJ2p33A1Qq4wUP\nFHtT\r\n=KYMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH609I20w0badSnLiUSPmoqvwARKJhZt/B885VB0JqGHAiEAyaM0Mf8QszFhJ1E6CFzh1sPslZjaG0aroVCHagtzlcY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.02e841b2.0_1620678824434_0.9942805430689454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.badda2f0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k0/oL07rDwtZ7rR3B4m6UjuQKTSLOPpNLKZoQhPhm7gtVOu0ASMYDsuklSSikpMq3vAWGtv2A2GLBWAPcT+SLQ==","shasum":"c60e8b704b2f055e73ceef254ea196da95de56a3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.badda2f0.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdDvCRA9TVsSAnZWagAAvtkQAItKWLWTfORi3PchyR+/\nsfy+uAq5rlFIRk8f886nFNiOGp6HzRuuKUiTZ/eq6jNHdujU3vcCXU2sqglz\n1hp8tRl/VOZ5mLKldL68mrN0C3XiZOPwTECf43jB5smp+OjbpSFui/cfsOU8\nU5Yolt5z1OwkXwgsPGM8X5k5AAZjN6ytNysbOoXWWsRgjgicucwzdQdbDbhk\nM9IzyfO/jGxIMN7Bfu7U78n3YrYu1eNBrkl9qb12cWcHcsnDQ9fwvGk6Yjfj\nvVMomB4yrdD/oAaYvDWtOKL4d4qpUh7+UdA2zCiZ1GZJi+37hRZ8dq4keWHh\nFtlTFSP/OTm0ffUtfHUQLUJCRsll/sMRz4zXJj5wObl8hpDMZCSN27g9ZwLV\ni1ODcNE96owrR5UMVBLe33FZkTQ86bd1s6aM2/Iqwa8F5MsZ3aPHasiRfOQI\nJflHP+HXNEtsTWjGo5vcKZR1B8zl8MXY2AYaS72W8uIOOO1KwzcSgPrjyvtT\nTdPQBFtzexoRpxKCng6nhG54z+JCfrlKdwGJ4teVAZKvpc6LAj9cKOtfpDoX\nRiIiITen3IoebBN3wUFeyBbD4ZTnXzdYSzqubgAWIw7+FkxFfFDcv9mHwu7c\nX7+aYCwg+eq0552aN6P6Mfytp6CyHrniXbILN4wBlsoaDUY4AKAIZVVCEbsJ\nZ7/5\r\n=ihLr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaVn6egBJ4eo9im8LDeRMCc+bNPtnpjzU2rXC3vWsXwQIhAPYB7LMwnUdAv8CLC00XigP4zBSBt1KLobzcrRu7U+DL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.badda2f0.0_1620693231257_0.9249742989458154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.004aca62.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2e7nTRSconENhokH6mvD0zyvAml7pjRKpac9heRUEbEredmfQ5GyCnZfwWKSymUxJJDSPtYlTWwahoAqyCjw4Q==","shasum":"4f8faebaeea19cc43b375a3746ac2ac33d6002f0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.004aca62.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmsdpCRA9TVsSAnZWagAAJTkQAJ3ksjKEEJ9ln5/sLSmk\nni2rIk3gasVgZjm2o76rIu4G4r7j/jT1LculCAr1e4115Q82IDo82hA6dDex\nDK8tHQegt85NqB9Y8guXX8ZiT4weq+KJpbGKCSzaZ9qs4W3b61RzKORRQWBQ\nVbUTYtgKqaTm092+LXC59/YzlbMBEMal7DfJw4YI3upZttaHK5xzvvsJ6agZ\n3k41Ey5CvglDkADpqsIyznFMWWRpAAuJ27bpe4OcE8wmhVTGJVqJ3aN4a7i0\nBx/ZoZmzcYmj6BbS5ZUKeXztWNYG07t/fAKrWx8uRlutJF4dxDRMG2bOu5y0\nuTq/j5EEier0BVRRJLFiy7UFFJAvnbOg9g8scWvWtwKkA+SvBTeuj9DGwrbW\nCxjkP0uMy0lMXOAyGQjG2E1jA7FzxzkL2rfQ0WpT9HVWNhkFWs2duKbozDnz\n2tfxTAc/jsxNaXuMxDgNYyCNz/J3kJ3+ulX+AW/zPC30CbBbtzVgy8u4WTF3\nzFlX9nePe2wwf4mMUKKkJGFPSTUTVpxF6Ur1DlkkrCH68V1zP6muNgo1dH2r\nypvnPf8waFgecwQcaCaYgTlJhm8ut5MvoYSUSP6J+rDUSOf101WDS7Z0LT7n\ntWR7RVBdtB9V3bJVvAVr728WBT5AL03gVu6lSR1ok8AlkS5z76kCL9FpnVGA\nEsxg\r\n=5Lcy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1rhgVUge/w4PKdJCfmU3RcVVPQob0ub8SoOYwFdZkfAIgTDRmVuAljnKpBYSrrie6yIGNXZKrkobLCN7FHLbfJ/Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.004aca62.0_1620756328385_0.3847148400313247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.4af17446.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RnB/FURRPeM01hDC13LJx5eEzKD+NrjwxrBVScseKGRw4sOZT9rbyiV1UYz6TYgY4AH7hHQHxfBJiA03HzWXNw==","shasum":"b19faf13820e7ce23d38d4688fb2988fc4c9a5b3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.4af17446.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtC7CRA9TVsSAnZWagAATBcP/RLpzC5I1x89ZfPgj8xp\nknfOCB+OV7QCs8tpHzQ5yIrDl5rCYnauOAoRDRnRPmCnmLkDHQ8Yuy0ikgBH\nk5pBTe/ZsCvl3BfwnAGQyjTjAxLNsnC7Y8ZXe09/q/5DAFNQqgUSsda6AOGq\nK1Fs8Z1iLKkakLUMfZW5UVrdoBtcr13UZqsDOxaX0QCjTk56lkHYGLiyCCrA\neUoON9qEx39YoyA7+vtQNiKYI9SHKlBcFE8aG+0K9KNdUMm9eP42svVqp4vh\n6sVF7O7MEiHFK+JZf3IOWXjt5gW8ytfHJBAzM8iZi5oXl5C0m5t+vDRM/GlL\n9/zVSmhGhiDF8mDcNagg0RolVKsVOPU1js0f1GXABZ/7ZzAYFg8ETcHcolsq\nhIjTkVPCj9ccT0CqA5eZLAWH/Py4QMe2diha+zYagc0c/mB5HWik9fzKG5R0\nMDj4p/wpgtAkSQoHmeFxoXU86zUYSMIIK9YvmnCfsxWhq8xIMJvuJVI4Dlq/\nC9PMnZrzVRSqIBOadl35Ttl3Cb0X1zW5eywpnrctRkmf9dsPCD8DeFuyAtyR\nLAwsvvRZYIY+ooL47RjhVkUY4WsyW8QQS/l56uwnhHlUoo8mB8xeIaE43MLl\ntY8HXbmotRi/2YbqFbd62+ST7XoUURYU+RRIhvQcjbQoGoS+uZb5PFVKqY+v\nARxi\r\n=3WuX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJu9obPW+IUWhmxxhWSDJcsL5uaf8lTCixMnmG3I1+cAiBM5Icb7QCLH01MijVEdKnu+/JE1+fQbKVsXS/bU0NErQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.4af17446.0_1620758714829_0.7097631543354435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b94d7187.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-r5LlLAcfq1mCegCs4zFb4D8W4ma5KTFxMx3RkdGYL9ljGWQFFE1yvJR26DhHeijfXY5En4929ZgZxrXGnsJzJA==","shasum":"2c48c90ae40ce2d06610049484cfc9c794e7fb27","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b94d7187.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtINCRA9TVsSAnZWagAAAW4P/1OEGkyWwVa6GyjyGd/S\nkNFJmroDmp9teqQq1zhRbjU0euN6tEUJ70qdEEQQvXUsqpcO19CnKIB/96Vd\nTSENiBKjsKkQo8WOR4RUtE3xO1qghSf/BBqwqfhNcMV1BlX0itn9Tn0oq+fg\nYH4+UtK0J4d2KsFj4c9jJQq/ae0Kt8UCep3G2D6mZ0HOQDLyo7u60xfR5fos\nWqXnpaM71/RMiUTMFRxksXpCCthY+y601hAD12V9pHNd3rIlMUbpGtdJtydE\nuSZ6U3myVz57sJ2tmWYXV7XWTHAHIBoIp4bvZ13uBq0esMs1b7qP33PBHHg8\nhCyZIFw5JRIPQ2pNIWbQ20b/RxJ4s27GZ/ifHGZPqNPP4EXxXH/rhL3/FFAo\n2zGsC7u65AWGrLBgDWb6AZq92L1qpjDzJoG9O3iKijtYs6XMPyJfJVpzHr9Y\nZlb1yHafbK6c/zqOLU3wTGtD+mMs5CRgxT1BdFpB98gvZ1WtK5RyMSLTTRG3\nshe3Op8uY9w6q8JNvLGdh3X1qxAtGEBk/nyawhJd9v6wghH/cRMxMqqSgfhS\nQeweXxUQ91T8UmBLiocLW+oJUobl7hJqkYsPmCwqPB7nQ6Hc9DbG1qqYiHJs\nBuypK333Dw3/8s5K+17tKwBsDRzN7yB4/0upuu1R5tszUQPUTTwtH+NugvEX\nz6fE\r\n=Uy36\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnS+N3+DdybBB1iavb8uRHYX/uTvNImDWl3OsQGqZ2zAiEAzagqxMlKsl3LD8mKX0JzfMOz5wxI1LUvMezuo0esrJ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b94d7187.0_1620759053426_0.3416281460183219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.4021b2f9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/ij9WZBV4hCQnIVNOfGQmY6a2oUpxxf7oSmOnzUWdAf6rTmCGn+WHAS1J1TVYXlw5NpEu4CjdlW5jspcJhqvGQ==","shasum":"38df45bd5e62a35280d9b075d633668d2aef55b9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.4021b2f9.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/TCRA9TVsSAnZWagAA598P/0hex+aolFNaovT96Rll\nwFldmNWl3zmI3+a4T+/EEbaBbEyg7GAOXD5hBvEosBzAyD7NRTMnLA6aNS4w\nCdPvxQyVGta/7r5qofX3IQ8OakoO9HNd6O1sQHPIk6Y32KRhCEmgBVC1Qaqt\ntz3kZk9Ol/x0473n31VsoxnR4jNF2MHKIuFyPen1fIFaGpLLrRk1+aCdybSy\nTGDWE/EvdI964dh2UzmjcvrjtIeJHd8wakWDFU/6Dxszjt7NpCXkgjuQyw8B\no2pOQdzC8QzMZtpZBxlOD6Ya8cJQbKlrk/KpaEtOdmOb2achsj4RYlTceCZw\nbUm9Mhbj4tIyxASQKDjW2iwVe0xQ2Mp+zBy+RqK2/bnrjKEa/TQAZC1gsOrH\nN8TJUqxAn/NLugvSTCqud4/jMjJURyGII1NjWpWKpcABp2pRbRDksuqyE6/I\n9DB4ChRlEZ3RebD4evaCvs+n0vLbj3OvyAtSsHYRjhNRNvqHJpXgJ4aVBkz/\nM7xFXXE2aY0krMfXxpt0tvkCW0igJdQgRZ2aN1zJhOG95imGKAsDe+nx7ieS\nZ916L+Yl/fZ5jpUiEweSpIyff4x5yJrIGiHMcGqF+lAEDBDiBsStXERKlS66\n4pkm8IeBdPGew94ibkR3Zi8VnrTMkH5aeJx4Y7SCQRFJErxUVsaBdp3QTng9\n2b9x\r\n=Li7c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwuK2zogp2EBhgXuWE1Ldch87WK5Oa4xiWL0w5a0+h7AiEA2YTKLkzXeMODOTgCACLl0DseFZ8UD+rUDhtAQLNLcUo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.4021b2f9.0_1620856786500_0.6768243114250476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.6a5956a3.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5gtYstp43uO4EG6g5J66TwEaoUNocA7OMZnCPKWL243hsqN3T0h7ZImXHXldLFGloNXQcQMqXmyiWbpTCZF35w==","shasum":"ce29a21cbb46cdc063fe1373e117f244dc38de17","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.6a5956a3.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPJCRA9TVsSAnZWagAAIr0P/AoLGlmW5WfYnM5BSNdh\nR2dixPRI7AwtC7KIOivhp+l8wU5on1Shx3mbEFCzUVoQqsyQD/fHqAKpEtw4\nHWJVfItWsPsRJozZgf9gdwHqOAe4ijAMDLEWKvGHIB0iVwIwsDcwYM/3dKKj\nrIBZ+gQV2Rhv2FPZuPLjxQ+U2xstmwTKF/D7i2PIZUSCZFGJm4FGfTWBDGqI\nt7mgxrTIMKFJko8Ep3t9lVU6iYu6Bx0xztBriRanKeOYZN5aL48shRHlMg9V\n9HfMToxMdoogNmBs+WKP3EeNjHrXtd5hf0dohq1l+EWQJmKGg6P/jopBGZY9\nVZO/lyLkM6XVxdjGu436gNWyaJ1acbRm0SwDImBnYc6KdqLqO9JhH8wUM/ZP\nTk2gGWjec4DlLeOFV2Yx5ahF7ITnqDSRzFOb1da/D7CGpk2/jv7eqW+dOzl6\nL4Ag7SRcRSQYcEaiIVV7hsaA6H3HaqsacZ84TsW+TrbYORpOwO61UK8Mtq33\n4ef76408jlCCCrPZ2o43+QcNH395n+HKbXejkzZ5gwqG8UXFyVwwMa5sBoea\n+HY0emG+8pOr4M2HuySlGMlrc8yJjr9R5U6VYatgYh3cvxWv8a4oJ30iux/4\n5qArcNxJ6nDmQn11lh0eTB9jdeL3XArqqpI1zLDTCMQgpPp1NLWTR0p/DF4I\n15dU\r\n=PVaC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuF3HYF0FzbNiKh+MBH1plduGppVO1wZsFO1ycmiBQmAiBFvasNHT8IFvshwl+bpCZtKT5bt9e3nzmPBROh3UJJog=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.6a5956a3.0_1620857801230_0.5796198715100067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b6e8a74b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Alhc7y9frtA58BsPK6KO8Kat3a8UFbQGK3ELOa02MJWnx25yozj1nHR2fucefKUQnnvrMq/EmVtRajIZG2xY5Q==","shasum":"248db089afa9767d911162f09d5d45cae1084c0f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b6e8a74b.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6QCRA9TVsSAnZWagAAwXYQAJ7d66hNRwtgVZDvff6+\n3eePMJF7z5jghXaIIyFZwHGKMjwVAQBNmnRfvFYQW2YEjNbo1yHphkHgH9qe\n2NfJQiCgpSubLM/Epiuu8qgjFadlI1HvBK2+i2ZJ3B2iMIPUs9Rwa+TMuOtc\nsrnUoPjoci7Y+/O/USGLkKwRTTJAdqPIpsLqb4Q+3cGFFlP8uoU7ss3afMUZ\n5qOHZaq8MZUUps8A3CH+t7Q177ZXH9WFhW99vR5uDp+VjPKalVqeO1XS2MUg\nS5W5/lBLv+uX7HInXK9NoJiR2Z720vzNguYNM/zH0wmXeRIZpzcw+6RJO+dQ\nTpMV9JYk7dsO/YtQi+XIF6kUFJB2pBjnYShUsGDbWoJi3/PuSNQz97PRdrGP\n8A2NSDYRdJn2N0fEWIYQ2+Q/LCcdVxorcNaPpK+1OZe4HPRCIVxysIuXAydp\nzC6DqR/R4B2CYCmaFbfTh7tJxSGX0Wp65iIF5k7s38inNrQPY0yEUXdh7ReK\ncGjo2fphQDiMGq4IinseStukyYxHQ6vDrJ+pEflDQSiM3NKEts5Rw3dFcTE0\nefp9xmHAIdOZNQMAzrLO+oFQUmsv4hTo2hFwWe+bS0OXHK8AKG7z9fAVUB38\ngnq73jCtSgoAKxm/uE9a/lQUQBcYSoce7dBnm54Pv4HUHrhAUyw1gFqqWGF7\nHFf1\r\n=syru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDolZg+DSrhwij02nJsOdKoxcDRSa6LFKu5C4IWvNE72AIgL4PkU5X3Ksi09//6ogYD2U6Cb1kjnnS9Rq4xxVIq71E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b6e8a74b.0_1620860559410_0.496775506857265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.c94e1030.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rIm9rDaOZL+2EjIBB2b9wg75JXucfWy8w0HTVoDJO8848/C06XLvCmO2Jxpyi3SacHai6ehRvJNA+Aun4P0v5w==","shasum":"971ed9a90c731f728e76f60257b8075761002bd3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.c94e1030.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF/wCRA9TVsSAnZWagAAHtcP/1VhJAkkxvQZSLE37CJJ\nztdY7kqPylMZERe+sdViMV5cPHo3zD7IQpn7EU7A8TNHw87u5c6rk5VFmAvq\nYiPJa2ydZAcNpp0FX0kQi5XPbcURZcpWSIxb9Bx/R2/ouvqPGLIbtDL/HjtS\niTqUQASl82kQBIKNYa9gocFJD4Y+IaOzbTKJSN7zL1qKIIYEZ1tdgUQix0BY\ng92DFqe56TCGDjLKpFtKikfcEFo1MeDOj7aTdhmbW2ih0y0FF3w4s76Dw4rG\ns84Dal2Gdosg//8tDrHt/0KBHL+7xDitiSqKqLI4fC/N78fLDyzspV9T77kA\noa/+h3kSLN8VIk09rDTZC1krNdpNZ2yq1yE6BgwM6GwTvbF7oO4TNXaAhyw/\nXJFYjhQa6vvpGiXU+MaYhkCkhlFr4YmkpU11ZfDL2Q958wYHFjkS1p/KnHVm\n9OVJfdmJF+izhyI46S/StibzkSOYe+zmTAIsldfFE443hTAEvv9T8/5Ei9jA\nMSKR7sVB2GusON+hgTlfSggw2O3M5ml7e5bG5fMrGqjJMXz7MfIbkFD2F5ym\nxqnnchL/O+6GEq1sD2unxsZw3jTLsETBcZOLYld0VIwjVGKaYe1I7wHsfYm8\n8WNNXc/zHDrAvVdkM7NA2z5w/P6mdWDqBWpdCJlTp4ukpC8pQFEo08ZLYQbf\nWIZL\r\n=Dbwb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmtMPYApA6OuW2q4MkGloFcDdFaHoY5oyLcN8cGKsGUwIgDdjEMWlGSS4rLB73SdpbtoCiuAhguthBwZrXGJXIp7c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.c94e1030.0_1620860912362_0.15485163564923932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.40a34e35.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+Uq43NoCnvUSBi/FxGGMFUX5xviMzXYiw1oTQ+vE7Wfs0nF7ve1eOVcvlKj06FeNz7XWjKxnkCuwFQxpZmnmrw==","shasum":"d2049ef06b2bd27ce5aad0152a4416e13a5d8612","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.40a34e35.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGtzCRA9TVsSAnZWagAAN5QP/1kQt7uk2CPWoFprD/L9\nhv9TEPWU71FBp50Gz4qKlRU1Kr5rCQneIOmOc+dw0nGl2n7mG+mEghPEhc5x\nigyi6/d1U9xjzb45nPI7TiHITkJVyRJEAi0kZHY8lBlLVy5282bXuLof1oqK\n+a9oJWU+tGYEK8qATOYkeOaAUXVQBuNZBk5FE28PcnZmomg1mEIjXcCYaFE1\ncf01kvg7ryNNkROVNx9Qrpkh6PEe4+tD+96Ge2yFeGNKREDbIEIU26BwIFBC\nzMyMkmXiRw+g4cuE5j5YdW0eJ03uu9VSRyarwNSGagkolHg3i/gAKmsxc42c\nuz8SnFOPwLRj9nefDsICuu7oj4kJJVX/zaGeyCHK1Dqki92iuf/RSPHxczTF\n5wmBBuNQxY3feENpoRnuSrMq2B1PxV5UJsQCofUFuTamktXJHyJJ5E8agE+H\nqSN1bLa2k4Q4uWWhqHkpKXLBgf8kQOTJC5So7LVWl5L0IGC3QOEpiIpToaIu\nh8ZEjGBXAOwXumgVa8Tshi8Ah6iwFXcbeoGR8Dx2W7jIJ3lR3m3Nox0X0eXr\nN/Quh5FeTcdrhAFCQlguUtfK61VrqnEMEScOrj2gXRPUCUAM6FLTvJdGUZn6\n/GW46nwvipP1XPDvKwbXjl13wZA5MOot0OszJnH9znEbQE4jOL1Kb4tbLfkB\nj1EK\r\n=ROP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn0nNHmUJp9NJKhxam6yzrVSmS+s5j8Hq4T0pgCala5QIhAL4Spd5RjbAqPz9NJolM9rG16DqgxIR361j0oDcX0haT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.40a34e35.0_1620863857464_0.4964942844933702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.1be14d2c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IujniGTrNwnertFymJG50qRZnQNvpR+9CLrURLK7SBEJ6p+HA1wU+/ijZF4Hj/EmOBrWSJlmAVPOz1ud0LdSfQ==","shasum":"ac4a6364161bc2c5a05745ee6ab5fc0446962c4e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.1be14d2c.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWaRCRA9TVsSAnZWagAA738P/A9/BPCFLT2uHsjo4tfX\nmzwvTy/HdSdIhOPRaefyN3qOs0F2OYzpgwFYqejqVo+3lxFG3CIHseEA+dwT\nEgBab7UB4DwR3X63vuG2y2t67AVJUiND67zQp1jWaLdY64g6VKYhEGA2ZP5a\nX7O0Y9tb7Nj9yVM8EYwhe8a6VSLVAIMr+ytgoWDADkBMEIsN4iAcohju89Gs\nPjdNhLgjXuEygvi1+BxYIYx63dmeNZ7GeoFj18fCjxBqijCe3GYXZd/AFGqc\nhNZhWgIuizKb4VKXappbK+b67Xswt0XqBZb7IoH8c577IEl9QnJArFk/P9XI\nMj6uhqyk52hiG8boREEyMQ+5CO9xOZUsIBdq75rznmd3LTPdycWJG0gCEhZk\nQNdte7wFabTqYPCgaIHqg0jJ0PFBhCvY1MuyCdbhFNvr2gPBBdxohrLWhCO2\nC7iiz4drkKdJqtcMtWeoKRzWTT1deqrvHxuyexkPyXp5w+aIz6VAmP6Y2PVZ\nTDdnUckEV4wRYvP9W7qW0QeFD7mKuZQHNZov/LOmOCxxB6eLpTU78UnMEBKN\n2razLap2c6mbFMNfkjQuSHKd7+eWw/820GIRJ9Yll7LxqtOuYiby0DW8041h\nSGejX/sxWor/Phpm6R+C8RSplD1moXfeC/QLtrmPkQ/OYFwNC/p2kV+aiVRS\ntNQq\r\n=l/DH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2ycmCLRdkz39lA3CuHFqZQLO3WawEPP9JdM/Li9AjnAIgHtvHgqs0TCAqw3ForLsA/ZCvo97V9AS+n1W0O+zFBSg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.1be14d2c.0_1620928144765_0.44141843549256676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.87dbd64f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TFa7faP3EwBXUftXBAjY+0d9SAJx/EQL5e9mmj+NKUQ/uB89LGljuPVRwjsb6RkkrbPGNgFo5LdC6FqGe2pzfg==","shasum":"adcaa751e5d4e5710004b42caf719b7e3b6414b4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.87dbd64f.0.tgz","fileCount":16,"unpackedSize":419779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRKCRA9TVsSAnZWagAAFtUP/0QD8X1WffQmNAl86Lbg\nJo3yG6gpYwmOjv61RWBHVLaROBbSfz/QK4JQCfO64KrsGb4wy9xM0LGVwuYW\nXiZ7PYVh8/YcvGLkCjanUK+pmAdHTFnzqkOd3VsVDfb4GIzjDXSwNoEZzy09\nvsXGEqzk4uxWSpvlV82a9S6JEI5pup0c/kBiDbghAWymV/G5gWFw0tYJNct+\nrhW5aXKB3EreQHip6qjhxAPzZPUtJkMlAbXZg6GmZkgZ0afKHbZz9VuVLB9B\nX6CrLSycgIXZLfX44iL9XMLWiRYmgX2c4tEhv8yv05LkT9pGEASo36YyY8xc\n0FCUju4Ed1NQYcs2fWles7mw5/Dc/o+9muaYmgQy9pb6wAXrmyx79Y4k0rUV\nun6RL31IEHtg99wAaEiFf04DDvzRdKqPGcJE6Nyap/lvcGovNkhmcMihU2Xf\ncBOWt7miJFjCEJXdsr+uyZ6vGG23wfX3h5K1vKFeGHtV2o7qfxJ9vuARHYvM\nvCZ0Tpqd3TVOSB7/TFXqrCdJ0NTZQySyExPTK+BuzOz5w54wPYirPYcn4tbA\nKp7XPcVkO9dzrmEcNrDoAsY+hu9Gljw1RprS8SoeO2wqOLzwk3fCMrFRfwP3\n5Yy8EoUN4sf98KDcrqJwy9YikoA+Eungd5SIDCu6BLxmRzAoojhQsW5g79x5\nu8cN\r\n=eftE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC363IkCOaV0VP106mhxBJV3SSRdkdpCqVO7iIl6hgi/AiEAjHFHcP+6ZPoje47XsBjv3YU870S6HGV7aboJMOBA6Ow="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.87dbd64f.0_1621025866000_0.6162637917625104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.c452e4da.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LIIYNDmVwfXTI0tnuzd1GFR2B13MugT7ybUJWZnasrdEPuzQRR4HSi1cDzmxNeuE47cF0kKqcjzztEb366KcyA==","shasum":"79ded6cd9f70df05ecfdeb37cf0aa6eec74d0595","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.c452e4da.0.tgz","fileCount":20,"unpackedSize":422912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzICRA9TVsSAnZWagAAAqYP/1Ek8/XaAa+zxSM0Y3UJ\nrC9a7Se7jjpEXgxR6rI3j0ZLXN/QoQPkidwBqFPW9b9+4cGpzXx9p7rjux1q\nHLwNIR3Bb6A2EU2xy18FE5dy4I+1yeM17gZULwgswehFWfPqsWCWoPba5bwA\nYLjoQ5G0z8PfH2Dcyth7FEXg54CIMEM7Zm3smZqIdKEzUIxYPASgzncPNZJh\npESh2mzSOnCEXArdJiGOnhOgCB3NnfQW/jAoiu9C1gRREmRmVK3DJ0EwHj0l\nRcat2p4mpTO+0OKY7yHwJJlzSaB4RUnqBeDhDBCkXDB8cXgrtG7iOO3aVoFW\niHyWDSC9qMLU5hO14651iEjk/eunMeroaBKPsdFyOEmqyWxhhrOIcE/WnZs1\n97M+P98709adBb8Dby+X9gKz/xLq0yyWdJ24F4VVBvIxIJwogJpJ7GVLlVWr\nLqtFv1l68/h4qsQS8cLNTsW7FHdeMjMLRqC7c80VYiGYwTLuhJXcbhKb+R+S\nfCXZpO6bxLQ01tUEts9DPZjtPqCr6/lQEPBJQVyQzb4KD3fhpzZNpLUsap2U\ns2kV1Jeuhj74kkapZQS2VXlCUgY1CQRYRLKtx5HXpPW09dkbx9xbqkx/tnhK\nuQZDH1Z6OX5t2oRnr8ZfqNKL6xg+XOvdoTrQVYD9QRDqj5C2sxPGm/eXtaRF\nEdtK\r\n=zCCs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICt8qp+45/pIM27O6JgheuNSVMEaXYmr7UqUzW0se44SAiEA6/mJg/WZr/XYaPjKsXJMfEY/qozswIWSDTgZqxicGpI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.c452e4da.0_1621294280181_0.6128851640023087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.2212691a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {style as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay-css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J3ZM06W7Nf4pC31GQfCBGCtOWtSxZCneya/kBh9vFJTYD0IsuwCtnZQ6jtSdaz0k6YcdaiCScogvAPNuUYBakw==","shasum":"7a8d574121c2c69c5d22f6018dce1333c534cba7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.2212691a.0.tgz","fileCount":20,"unpackedSize":420908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowGdCRA9TVsSAnZWagAA1zwQAJZfwmKN0u+/CDCs35uU\nLjAffxlnjyVRNUNksi7kAar5g0ZRyh3AkBCA8HMgzYK1qVRGUBE/f8icrClY\nD8r+UgirUYoBOSdIkJzapV8kC6wvNb20AuDVQasWSP4Fe9ElPI9pXZk0rXDa\nhLJhbhDjGJ/Gokdhhz2WeW81H3c256I/aQAGuSg1SXfVWdzbN262gAkpsb1I\n5r0vN9REU98U0IzW5Oukig3e/qBC/jD34dlHcGS+OymK7Q1RITQ3t/FqbMEh\ng0zK3hkDmstY3d4NTyUCsFHR5QfzbHWPueJJViPVJ9fCG1Cma7kfP5w/Sn9B\nMs71VqD7hEJzxKIx6I5qRoViVxu5QdSvGDMyGXCwdpIMG2sPHhIMJF0ZwC6i\npaEAbTO61Au8kBquKVaW/tA85S4L6v1IF9VFMRp4FBX9kZi5J2X3+FdJhsOP\nj+YD3wGeku5h2HPr9NzhC3e0DYSGnypW3pdxrkRgBf08raashuK1GWFVBwBS\np8Yfam83zZ8tFgft/pjP4VrwzRr1bjNPaOYJab9+G9QbVKDT4fQQWcbXCc2t\nIY3QpNh0xfDNbJcXt7X4XJ2Oosi26AkAJnwx30VDT48mreDOZWzwAQ2H4Ncc\neENvCXszDnxRLbeHNstOYOXYt/S8+BUxOcoO3D+IIxIzc265l2PcqnFSFAT6\nuaGE\r\n=QOXP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYBLK/YgmyjfPXKGT7jOALoQkX7e8jApe7qJRRAAwqtAIgcVtkNCvv2CJH3LNFyPZF8zAe+9mKS8ZumkrpPjOB7fg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.2212691a.0_1621295516930_0.6125622887823388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.f748ff2f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tZDxBLgW0RdI1Z9QZUDp2DZmstMGKDBJsa2zhRoLCgZVzPZkmKjTPpsX1RP14qyEH8jtzcrss/fUIzkBg1JaMw==","shasum":"eb1c775e9ca4cf3901f77319bdd77d183df90390","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.f748ff2f.0.tgz","fileCount":20,"unpackedSize":420909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowiTCRA9TVsSAnZWagAAkm0QAJ+v5JUeDrX3srdrE56F\nln/F9FDJvHxPws+aGDExa0JtAOkfhzzKuC6Y0uSFLU0sMZZs7fdiHZPlURbf\nFDttyyZU8l6bP81DUePjTnJpLe0i42GLVOrm248e7GZviqmFWn2eO4L4P6fl\nra1V2KObRhyaisO060lE7JwuQ0cQq3IKSQgD21y/ou6f5fxiZGpE0CihOKCs\nSCnK/ujRHxQHyDYXmS5hiWqbsMstlIlLLw4BVsKQNkrjmVdfHnC+jVxOaC1f\nenBQP7k4rrVxWTr33P7V9TxP7NLfZX0IwMpNa7SexuzWrq6Ru7xjDujVrSxf\n4bksK+P+hwCRAkTDUE9AH0lzWX6FL864T1vGWAsi6krrUymptvhRbVD9Z2YM\naBEvQaInZI6XcUBGa8b4FqPb/Xny48mhG3t31PiGuTvyfjadSM0461Ca2qm1\nnwusqEBy9BC1xvbNILRTccdsNOtRJgsMpBAu75fiQUX1gLiQQSTPianXk4z/\nT/t6AsGtbE/LZ0cz90fXCBpKnz/UDcAHPZd9ijh7ot+fAXnkhTyroJm4qZ+R\ny5AOJjrERB2DEDz7g0/rYQxbYVgz5HXGsO6rNymENWfCfUAeQw4fh9ENm82u\nTqbAvfC4waDSNLMAXGXSLvk1R3Xb89gx4uo6apZCBxroHHLLMekbsKg+4Tts\n+4q7\r\n=ZJ4d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAR3vkMLzvFREjF2Q6kj5Y1BGdWlmJtgI6DzbZXCFqBQAiAyozbGkaFYjtddgfosSdkMr+U9Fk7GKjY5404YF4MB8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.f748ff2f.0_1621297298443_0.5004525177435504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.cc04657a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+QqFOTYloq0sT4Bvc143ssLzljEr9H7fS/IqjV6HA3nPTV4h6flo5gsDWMnWr0t6mAByP1E66YwsTKQAT6jXpw==","shasum":"d61066c5aeb8603fb5cb4d4242122d86d8f345f6","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.cc04657a.0.tgz","fileCount":16,"unpackedSize":416360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZQCRA9TVsSAnZWagAAdS8QAIoOIBXAHpA763mcEryd\nSy4mmhZf3M41g+pYYkDrjAU8PD3ZfotN6/zkuPU/pFFtWqnCjog9SnNhpiSz\nGxz/U7dKHu44ybdqTeKk4IcbEUDg3V1laAPuN3JdxzoPg38opJej16+aq8pd\nq8cbNl98jIIw7+JGLcsqjWcYo696JIgNCInzx3UwzNcXfN783oHg5/hUiA/n\npfi5u325jU1vWWJ+lv4ekQhoTto4DpI8RA0hdCCr45cqMqQy6u8vZ6CEzgud\n1yxKLRmAVK1h4lHPOddv4n5/IUaTlus0louYMsTyEOlf6MfxZclKKENJHUBe\nm1vtjRrXrAE9biRumRx1HuWsDJGel3GdEN6pAWcBW8GImX0yns6mXVkZCmTF\nvVf2LpWqNqStwJP6HJfS+WWVtrxJRpYAe/NnZ0/PJ/2UkyTquHupxxFNbP0c\nQAQVfT5sZ4BX2B45KkWqWYsbfzTJxrugbrXKQVYCk1nJoWFvgKdz6g0BOwn4\nyNaA3Kv3aMGg5KkWYFC46kY2m8V+D2+N3FgW0u1sWOgh2SIZ0Mcmg9UnlKg+\nCJIYrpt1jc8iAXLHkqfCEXVV3kRtBSW32SkHSIHtaYTJh174O6Ab8vAzKxVZ\n9G0FiKgOCdX14fVEtNJ5j1WBtekMQlhHuBWopFmX7Nr8EIeaayFyCqrKbVNp\nI0XJ\r\n=bhDm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgBQkp74+JZzeYgKiyuSklhMzMQKpPD3FOPhjIKwav5gIgAwdBuvln2cqTh90mWF0Bq0rcQvkO3BKbWhZGkQVzXYQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.cc04657a.0_1621300815316_0.6986574501587539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.3a3114fa.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GAG8Q/3n0IEMSoVHv3FWEz5L/ZR4YcL5MzpWeDHXKe1Q5f5AhSn0NjSqhbRqvPMF80h/4Q/fpraCGeYmXD9PRg==","shasum":"8ea657d8abe2a8c66fdeba09a3f3a0d71aa844bb","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.3a3114fa.0.tgz","fileCount":16,"unpackedSize":416360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaGwCRA9TVsSAnZWagAAmlUP/247SySQw9VIoeFU1yLn\n5/CJqYCrPAMkFZCHtrwtuphqRomr/Nyj7dhWXyaKdKFaL6h+mABNAgb9qos4\n7KQwEwPbN2/YOuhLcZgx6+x8KqXWifKADhUnwcww7pZeOido0fhmIZ8laXFB\nNfiq23acoj1gxzWeFjjeEYTu5sRTXUP75SbDSo18CsywyR907DZr3KQ/4bNa\nCWs/wslMMK0i4fOMJldPoC7b87DQwFI+fzwmQP5nyas4CaShKmVttQgk6NT1\nizUX+p7OA1JRIFhg2n8hAtTF9QUEnQmMStTMyLuYaPffKSBwsQntKoO6sM97\nDyl1DKMlu/uJVoNa+g9hajDBMlpMWB8dTgp7ZF8yTPHvEpLsi5MPCGVtp2CI\n6GIicX/5EZB2TWAnj/UADe1uqo4MH9I9S0PfF2tQyXY96rA5eqVpnjlokRVv\nxRzGfFkrkucjc8JgsY+xAlJY5Qrq9E18Rx816WMMOeaAcsD4MXOiuPmXAgE1\nXloNhTRtManu1qG6Ghn35CdfJZvNn9kGPnSbxgqNjzPVgvWnQ2nbFfI0/Jr2\nXCutL6a2lUxwyf9Qh+CAlvAN8evMUAt1thxmfAryoGD/LZbiSh0Bbb2Pv4wQ\n6CJ6qEGnOU5kToPUY46MuEt1l+GSIe19aATT1uS8pHX4yveFMBtFk/5MhpqC\nZ9Us\r\n=pIdH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzVHhy2ObKGNM93ajMlH3vV4xTs7vqamJcleEQpc9NvgIhAJnW2F16fqWktMHg1nJwVo7hcut4Fbxqva0lQYJIGq8P"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.3a3114fa.0_1621467568183_0.9083869722729381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b46bdf83.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qzQn/95rkyW26ycSxD6NNp3OG4tNaIyiotBsa1AR3kjmrdJEKsSsmddvXi9Xgco+NKRa6kBvAZijOTbfXpD3Gg==","shasum":"f7285b2031df61dbfde3b0f24db63c5dd7f2580f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b46bdf83.0.tgz","fileCount":16,"unpackedSize":416360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcBUCRA9TVsSAnZWagAAAG8P/1nfNw1ZKTGYEUZxK3SU\n1K28OPbaSsqWXoiU2kTFN7dg6RMq+VnwFEQkBZtCj9ltgGdDDq1dJplKz8sA\nTEx4WzMk2kjLw6T3yCx1rjhKoIeUDmxIKS00WfBgZI94hbDMpWMBhZK4LGoj\n3CxUvJTDX+H7XXXiOWw/sN7NN1uEwn6Qh91VsHewchv+AaTJvL6xlMB2WkAH\n8ZAV13r2UxzImO6ALOoxmnG/Ltpzp62TzQ8sD0ioAkHyD5XNKZguqaHgorWC\nkBP9UXv8lJAQturLogCKlK074LUukudZOvuIXiFLprAiiPfwj35/qD5xX60J\nnxyzSwbaoQLjiElk9IYVriXW58S0rrPON3drvr9xiamy07miAbPgBnopkTlr\nBWJ+0j3ayIs18xdWAYkzkRVfWn0Pee9zaEFlKYuAEI7YnvNhjY5uvJPB6lYr\nsg3BsvJwylH3vnQKVIxHkEUuN6QU7b2fbZdxyD8ZjNekQ7Fgutw8m49fHI5B\ndHcE0Aq10g1v4TaY0yiUe/+I/GU+nX0E+YmVx7Nz0x+Z54V9KC4HflxjUt7N\ng1xu+fUd2ouMVqbBVKCLGsvnOs/WS+Zp4jFTZcREAvua88PSVc3GMiec9aC5\nDjo7nIKf1PPMgrpz5liC9KtVT/jf8uxU1mcb6Bt/5eHacjcKGixp3GNWXUYm\nW+0b\r\n=SHPv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCce+6AgVzBINPQ3pmtj9a0R16B+evfqwwaFQr1qKuuMAIgM9hCzJd9qI5RCzxoURn0NuS+gYNlqfN5KKa+vXEgAXs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b46bdf83.0_1621475412051_0.5774157181178992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b401a081.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YsJbVWLgkcJmJ3wGAHrdJsfQ4evbJbnXLZIXnUhePLCuu9o1Rns6h40gITMrJCsKkr39cZVfKjVRvlAcAYBK5g==","shasum":"c66b3cb4b324f433963e2b3e5724758094145937","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b401a081.0.tgz","fileCount":16,"unpackedSize":416360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEClCRA9TVsSAnZWagAAplkQAJE9NJWZ2H/MkmDz89iS\nDjlSTclEPmpiIjRBSzju2DW2X4r+MMzGPNJDSD7SRiM4MGSdBUsq/bQgWdB2\nuFqorS9FcrmbFRfwYbp5TBheW7OL7UsA6eITO6tauPsP08gglNSBQPOkTGyV\nHiTZiE6NjxBZ625VSFBnSPMbznP12Al/YzfI/QQp+D1wxXV/EEhCQyNA3ghn\nr80M4D/dbfMIQ/1M0XkLGyo18VSsZ7K78hnlcsYbhwpmDbrJacL7V7cuqHzZ\nXgIGDDVCy1N9llXBral5BwCQXvKbl6bJa3bGysbWF71OlV5bnR+ER/+Ffrio\nX9LOnz1FIkF5AghrGZk8vYEg29tL9WQiB/Ckmq4v4dG4zwbhXaTJIWLrBmYF\ndSWgWcQe5hzYdTmeqUOF/5l/hfuCMK1JnQyNX6ybGkGXYuX5+hckL45WibEl\nCKBcNnL1oTI8oz/cTMkzQCQEE5vYI2JU7EVvG9UPqvJEOD9k7+kPXte1mq6H\naanldeZPy+xVGQwy21N4Bu2nG8LKwf81KohoNXUVTETspszqEX8xQ6gaW6g3\ntndjwvEHct/DWYv3MyliilX2cxutYdlV4Vx8J8EwYSiOEBpgYfLrrJvPaQo4\nvIxoSmy6HdsEnRR4rwXrRZL48Fgqdzg0FlB4/cfHDRxGb5Box9GOIqoM/wz7\nH3eM\r\n=xoHd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTEDKzuCJ3ICipnOWudIk82Q+aAIxib9iJbIcyq1UjHAiEA5oUHfNe6OuXKbgkQ25X0hM29Ru2Pyz9Q1HaPic3LqRI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b401a081.0_1621639332464_0.5067546832306289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.012c8dc0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h9ZimFtppFIJbLU/z7imicJRxPxZAK+9/YshhR8FQj+aRk/n/FKWqQEA1EVobwtXA7wXfFRmhocOopLoX2BLjA==","shasum":"6a426d373198c9fef10687a13c8de9161654cb77","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.012c8dc0.0.tgz","fileCount":16,"unpackedSize":416360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE0xCRA9TVsSAnZWagAACpYP/R4wOExzZQBpd+z0Xq5W\nc6+Gh3cDfX17k/UiINU+L1unYy9QldLb3De49tXffQj4L106iqhMc+h36qVy\nvujS7IKQaxF4DsiDaLdSbXUIGcAJo2AWZWiknCI7Z0wH9lZgZAOEsPJTkrTB\nuV74CnB5mrCpf92fEtsSaSVUrXv7jqoSzsgNLEOV1ce6SHmVJjpdyQ55OpPG\nbkGMWD3wHlTqLAy+As8uKXTd2PfcC1XAy58gpB0GMRdQzkrj6IpWf0g+lRsH\noKdXLH3z0FfLX/y1opX5IeHioladE8kVz+YgHMKscxRXg4Lix1Jcc0aDyR+n\nrMMSdWqrJq5XZ/AeXz9+Z8GI46kZoZ5jwvl30dAFOdl3lGb9ePBR6lE3aHt+\nl2/m8r2MLbajXemoZPxlYe/dvaZN/ftTKiwch08cK3NSk6rwpVSjOpRWkwW/\nHApEdpqrt1PrUmU3jN5CpONcJwi9tZvBXzPR4Mtw5zvB2ijqsDX1RE7lKR5F\naAb1boA9sV3MTBVZiOYTjyNAWascemZW05YAb3Dlwl763uFVYEwMyAShZ6lp\nDUtDoNSzUU8HGIpuHGW8jDPXLNMLKsVdYr2uaj/Sfj4r4oTX2lb0LZbGkOn/\nwAK1BdKNBuOOG1+6cEoMVo+dFY8RM80IFYcuhlpwBEebSNsVhOw3YRUoK4VM\nRzf/\r\n=lUlT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVm0KZfOS7hUIyP8fAwgXfTDHe8zla8YOstraloR9k6AIgbqgPCMW6nDsjlT9wxT3e7pW5MKPCF5/4xy3AfKPfHKs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.012c8dc0.0_1621642544507_0.9047274507434944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.e01a1731.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BuAidA68tOJ2sEKRABCPAclPQd0NWFaxO40307bWwa1a5hPV2mePpZIa4IeptHnxqZhicgqYR9tqycfh/QvXhw==","shasum":"e32195a709bcba4f778655814552319d52ea0ecd","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.e01a1731.0.tgz","fileCount":16,"unpackedSize":416360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq830CRA9TVsSAnZWagAAl9wP/3zGnfmGd9WyjeSMvqFD\ndi3NXGcJDe1GqeYi+ttPhfSzSL0skEZJ6Yyve9Ry7S6Bzvmvl9DxIWQXTN32\noDtUT5Unv3hfMVd7jLsH9P1v65l8/yDulT21jJoHjzLv0XwmeEc4J+4jzvS6\nqX6W86EiRDRwlwatMwDROk9lrUecMljp6d71HDp0X0zhIGdWbvs9ecseoGcU\nT8XPJOYP8RhIDITVKL3gSM2EPE5/g+zL1mFbrNs0lBLo1eHauV5vF5Ur+kjL\npeeUX1nozVHgqsjPP9p5pc2iB+/7oxUYNV+2ryj3HifWpLC70nWh+S0R1fFO\nfNXNHkyMfQpQGg1aRUsP8/mx0oWYoNBV3Tqc1Nq+AaVWWopLl2zyyBWAJloo\nfRxus5n6GYSyhG0mvFet8Hj34Q0ermWb06ty9q04pmyDc4YGukcsT+gwzuS0\n0IshDRh8Ch2Gw4NvnEpPoAhmRf7NRkK6bjkLH6u/hbcgeWNKgSfOR0fG71/+\nx+9PsdcJsANdg4BWu26ABhlcBy61yShM/sb/Z9OxyBkaHzgzFl8wsdz2IGbd\nqZQdWDWDPKbGN01WHNJz6H5z2Z8wQ1gjPk8ztXE7tzRdXSbsSZNBYssjiVcA\nDty7muVV++nQWCGAsRJZwoYXjbyumNkYPE8Y7Fi44jqv84xRU5TWr07nMR8l\ncyBP\r\n=eMIU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFknQbycrgT11kyIsHaaXzjMWnZr9enmUAjwG1kLbELgAiEA0JzO30vc2Ykucs+PGLfvib6sGTRzs71QotsiRO6+noU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.e01a1731.0_1621872115695_0.05431980183594254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.59174b9f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0qhDPi8wjM3obLbcr4NbJWL6Uj9Ke6OJHPm3vi5UQCYFlpfJJ7COzA0RUXGE4yRQvZ72YLRE9FLlXfzuJGJ8iw==","shasum":"213e07255a60662922b7224cc0f30d23657818c3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.59174b9f.0.tgz","fileCount":16,"unpackedSize":416364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTtvCRA9TVsSAnZWagAA4dkQAIDNbvC+2X3jyjtqPZ42\nXe9Gzs4P3xPEM/1HTt3ZY+mDgU/TgaSiT6TnXlFSfwJ4MiX8l3tTpm19nP54\nK6pNKSHO2rsV7VLLnb1/nCkMBfnInkiRjk5xfYgs36DX5cTYii6KT9LJXow7\nglWexUdYGZu3Iauz2OpQ6gIiTIHsX/NarC36upwZcsLqtFewt+T3zYtnp+M6\n82xodOJYhAX7Z2ryLF6n7SKJAWZjs0uKDikFc0FINLJWoPYrUb1eHgLLI5QR\nWAF4YQ44oy3w8uTxvgtG6NpOT6up3RptYIPVVtBzGqGJlvq5OViMenXzDxUu\nOMnng2bkW+ju53IhxkoTxP7eWVaAxI+SAVqlD4f1hoT8UDuJgKgpej4DKAMT\nqkgOfd1u696zUpRnVf6MLpL2VDZx4UsISD6f7QWhPJytYQC3KFcFbp6pyGtb\nQNByiZZtSD0WhZCsTqHTokUox6mf4H4A92UlHcVYKgppf9qz3ww3GUDw28a/\nB/MMbugh8/Zw6jUKs4P42H57+SZr4SQ/ElDNzJz0F1R1HkjPfPo9B6APdUqZ\nYIGZSlNf3V9MSPCWy/coALtEQlGPyUm3uiCvoTQi/R09sgRa9HDGHr1eJf6E\n16XOD16WtOLjFR6MYoS4FG7g5oZb7uJhErV0wRs9SE4FoqWKgyn16QuBPu2F\ns/XP\r\n=LfSG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR+YrsaijYi0unxZ88RTywLDZ/aY9HpOyKzikUbrqJPwIhAOsfVWAtHhH1lWht8SKXQhzWq9Hqz08YasZ3gSQVJM7z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.59174b9f.0_1621965678938_0.48534287440063273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.c96cb2e0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WX8AA1xBDgnfjdhJhOTlaL8ltZK9jRoStVNqL+IAP9eO9YkZps31OrYBkvSfGY2kyW/nmdgI+MOInmSVYBCiYg==","shasum":"f78e47970cfe24cf6b3102a24a49dc53a6602a24","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.c96cb2e0.0.tgz","fileCount":16,"unpackedSize":416364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUvnCRA9TVsSAnZWagAAkNgP/3e5GPMGKHWgiFsSkqy5\nv1lLMmDkGb1LYxyCyQHCdNcNSM9atrjSCwNAYRTnMse09qZz1qtkV4GrckH6\nsSs04J57zdtgQIQ+Qi1DyNb0HEJTIRpueCdHC2DEP6TcPdXR/4Pmccz/sz0K\n5eEgPalKZnHP5EeC/gIdoSYBCx+bi/cAGaiOiMqPmpOWNpEnEe3PkRqmyiQJ\n+p0x/8AT69lxJUSVeIh7etJINH0yzROasy2d1HJQJzrEmQAo7HBuW5RS1O8e\nnCzuPtTUoIej9i4AstOERdnYEIq12eTpUtSgc1MkcnZnn7MqPdGrdOEbAL5q\nRPxhsDX+t0DzZtbqv87TZ2dBHjdDFMuwNO2t2psmJIu2b12BinTDNSBgM/H9\n3+X7zSsGN9K2waCewFlFDZW8OqrmbAoAsRcerHU8/+z/BXW8NE9skCUpEKVu\n1rS4YD2bAwf12bDi6gb/B02RsRWlnB5N/a09WYf6WpYIXsmtbK3coWsiH73y\nyY+90tDWUDaICWvtqynAgAfuWq7XkR2iuceaNW3KjrqmKk7mnZF8TkODkTRk\n+pBNGiz7pLCIHYYB61WpUzQIvuckAFd8xe/QEOVEh8oSqWxqgwlx+j4jhlgE\nbNBNnYY3xFK0tImTc+x3gwA5UMiipoIr8uaRodv1RUZL5+5z7CT2LvGpPcp7\niOhH\r\n=+JDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+ieN8A5IXyF2lE82+Xjr8nFlMpa1BHJXPGfxjvZviUAiAbpnBkAGUwAnyP3F9lgBfkyf4Y7Sj0KeXSi4XzpzEIgw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.c96cb2e0.0_1621969895244_0.1638274119271761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b9b0e330.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-euY6k6hpJEBHucigOkGo8lwcEFuvEkn+VoQbrL12Q51/9/5YXrk1pzkXYMTIqC6bEbOZGSdLn5zdFVwXtASz4Q==","shasum":"bbf081eeea513d0dd2f844d34de1aa4f0a425180","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b9b0e330.0.tgz","fileCount":16,"unpackedSize":416364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWU8CRA9TVsSAnZWagAA8p0P+wXk/7ycyDOP1StHTHI4\n/aizBEsRGGfo2KRL9KjWoF5wfSTDWLgJNGkv42oMuzA4O3rGaV9RFyfWQ3bA\nalE+XHcjKlqtdqc6D+QhkhGDDiiX9pOTuy/vYMru8OiFQOM/Wjk6qgICw7K3\nZCm3BORnEYyHaDoQ7wuJniiHLvAX8Qoh+k3JrCI8KLH5tOOi0wLeM14kXGmJ\nxNNEeU5Tdcs2wGqO33QXB+2cJ7IySPTENKaB2IH0DU4RpH8OWmzhc1JfzUNC\nobolDT2I2DdqSycqGv/C7R/xvhmm6Y3iojKN5pbpVQx7+lw6sET5ap272YUK\nTGnDiYSC0BtuS9N0krt6IuFeExQGd2fmAUD6rXFKUANhHD0ulYJf09nIYdnX\nB6kP6tbDuxAyqcwQUH9unxqdJ5rfFIBKsxGbE9okXLid1uUPr8yALaNrTZQo\nTU33CuEeuCTHD0c7C2gDL20n46OY4sqxjAMVbCZEPN5G5cSsfaf3WWPsNGKX\n3udTZ16EFMiDLMk4Cip9SND7aoKJG/r5DOKGo1ZxOCaDUS/jCp7UjihtrAvF\npxvLycJGU++ooXfLddHsW9t+Krp1pi61AKMm7zi8QKGdPJPsZIEE3pyOnCdL\nXYA3FLaRN6bKfEDye//mGQAqty2jOahkOHz82e5PMA3Xg0eSaoIivXu+vecn\nJupq\r\n=BIBX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYY621hg8dpC8XHSuqApKYP2nEi/3phyiAX/4vy2/xJgIhAO5/EW4r6QECg6rQ6fJx27Q56s0yXsIQCZJQp0JZ1Hvm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b9b0e330.0_1621976380149_0.31117432944691337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.ea2a8063.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9paqXyStt49zF07i4BVSurYJzqd9g4Hs+xHbdaSxkkF2otE6Rdda76k6WACEM7EBahgCZq3dQh4fVoH1S28uJA==","shasum":"02926f5d985a6461a17bb8bf5514158e455d1b6f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.ea2a8063.0.tgz","fileCount":16,"unpackedSize":416364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWZrCRA9TVsSAnZWagAAPtMQAIXsC2OsJMigEnI+KshN\nquqCf6DExEdBcLseE1zd6kYmlgj7xLrvWcQn1bP1WN88LzPtC3Fejp8Qf82W\n7GKKGmv9nXaNLCr7c4LgHZTGkmFP5ZDYE4DdSPimztJBxyb/kiwlYP567ze4\nueQfoYdBTJHtcHLCtKBkYZHQBQNgkMwHmtae51svpB2OJHGhnHIoWR1tmj60\niMefVP9JPppumOWsLOVo4Zn9eGAFKXzp7CqEE6AJjsPOYfvVTxF9al097czo\nHPK8YH7naYnuqf65/JOi+VfNI6lJtERf14GE2+yvVoyubJvRGgFHiHzBoGsr\n4F+JNKBgfJgRjvx+cnFgBPBoYQxSdPiFjMqx4bnCI5lGb+CGkVgHgug0IMEt\nyysNwWnPYf2gwE3be1Z+jCFY07TXJ+gxYibk7ooR962HtmHZ3SSTvk+njp1G\ngerWWX4JpeA6+f6qbg7rRvKmPPRVYQCZyzg/dB2K1hkuCgC1+Yf5zvsHv5bU\nIDTbkfIMlm60qzMcpbt6b91ODlJmxKjV0XX5Ga4HSHFvR/MCSDbhiLf2gVNo\noGDlW4uolx2uVlz0lcv+Lq/aC3jdz3D2pZLFl0rLwOZPRS/sUevRopaFJBsK\nzHy0o3ejt4yAMw+1J0vBnYRd3ph7pn3dGqUz3X9GgibFFu74+53uE84XOczr\nLewL\r\n=lVgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIPFxJfYm1L1g6/e2Z00rt1A9i5GEZzkB1w2FgmbQAAAiAMjqU21fQg/duD9LUb7C3hQSs5ZSZDx9vHFOjGBlUSlg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.ea2a8063.0_1621976682878_0.9779097796417922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.60cd9178.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rLbuFFDf7P5RIaZpuepDp0viQq/6sxPz+oO0eutMXuqAJNv457Dy7JFH96d7nneC0D/gzUEzyxhDYkpiN3gQLA==","shasum":"7ec1723e6b54f57d535539fe4e9662c76cd1e733","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.60cd9178.0.tgz","fileCount":16,"unpackedSize":416364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYSSCRA9TVsSAnZWagAA6CQQAJ5F08W4EBpL/UEW+7tN\nFu5hEibbJbS+bbWXi5e2Jokg3Sss5yU0YjfC1n4MOxgjUTu5Wcl4K4/1aCRr\nZgFn/ZbFnMpGbj+ysrKbDIRUZeWlmYJ8E/pkHYdDdS26Arts2hyEVnf7VKeC\nSolVZf/3xlQ70Amaa/FsFv1yf/jgOVcfRozZbXChDn8VygBL28Vfk3He7N/D\n5hsC8YegB+DzmYRp8PMOmrKzj9lk3fi2B98rM5GO6WJVdjKnKwzwVcv/wxnz\nQ2wLNrZ+awr+O5sqUgDD+bvfA0LUPpwdY9DjBjMNvNUzlov6M7FIXII+vvj3\nXgEVARrOvtKEHJIGsHfAz1bugVNZoRhwQYoQSHbDOG7jXbYg6r5r28gd2lay\nHRe3O7m4dSa5XCIb51A3eOrVm2KPnt96LHSGYP1V8g4+4cZfEaINqfQCAPv+\n1RbVz/hRhp/4Kxu86cqUYdnit6yx8Q31ANhSwM9F/JhSW1/RXm/kFMg/Bh+4\n2NyC8krwcxmFMFl0GfsxeLE3WwtntfMYr8V8PZZswsEU0fX7wTyw5Wgfi4Cg\nUqBdFotLrcXWGJTuCzYQoHrxIPeovikTc/lpAjkoOak+plIiXBrt7JutDTA1\ncNieGCsRz+88Ur/oNIX6IdYrsHcPrBJnKOt48PjutglGkC2OxvX/QPysnODT\nFn8h\r\n=qzvx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFokshUR9waXr6lz7wG4Dyx0i9aILgeZH3c8uq6+zi5GAiAGXn2305ZlCMoGvU1NIe5pQ0/8MJDX8KBEHZajTqof5A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.60cd9178.0_1621984401565_0.21532856663089084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.2e2c75f2.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PYGhB301i9pFemGaVqAyKjpitnx/ICHIWgejOqOvFDVj6s3KMZVr3NNpRFyF1Iyhyqj/68cyqCBCrE3qrcQ3jQ==","shasum":"87ee230451974fd51a97441cabc3d435be107056","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.2e2c75f2.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZHkCRA9TVsSAnZWagAAbZ4P/3uVBMhMkR9TnBqx8nRK\nIcOCNgJChEqb+Z+au2rbQ+LUp7g6vl5fglo1sv2xEok4IhR13hwXQtuekhnA\nDSkHqkS3esBS226+nvWxM7MNwBqR1r46Py6m++N/j04bL4ZAyq2+VpBNMxxj\nk1Xy5szSzPunKdaiyhD/peDCI+SzRzhC6WmZKn/7BcQwya1lKSJ66/wvVaY7\no0957n63Ui6HMiKxhBbPxUlFgZCHFsR0jjoNJ2Lj/h1N4oM4E0SDiLG5DStZ\nPLHnOymK7L8RFzAB4vK41TPz8osFhIjUFFMljbGmbtcsBIGX2Xl6VzUNMQqD\naFSA0dKGL4miTJ2eIYOjU6OtYcL/fjCDB8U/7emStgRSrrrPgCQqLdOZSRiq\nHj8KElHNbDZTivQYhJwRkyjJY8jK4ChUMgBhDgDPJRhbT4xvTO5yZqrk56oY\n8yHiBWopCpkAndvkDijpu9T8Tz8fgCXCbEjbUA1cY+1uVFA3D2CNd4TfPSfT\noNTZ2FsK6elTPVa/rL/VAvJ9u4CDFyoCi2/PT+a6uf90lYOC8qAVsI85j4c4\nSPsHIbnSGMrQNLMz9Yov8velbBoEiqB6ccdCJugGOFYa+Q04xWKp3KwEZs3r\nY1Ifgi8JgpSc091gL5PBvPwIyWYJ03Z+yUG4K0pl46VAdcMiN4swUJQygPuy\nNA4u\r\n=DEM4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMb1hjfNYC6jGYDcvvRjmrAhdWVv65Yk88D/boy41nMAiEA1xB+0ZJW1hkMAYLx6/P+QLZphwQ96NAoT6nWXBrz6Qc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.2e2c75f2.0_1621987812127_0.47364667373535085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b99c77d5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iGyN8PxSv5M9UhV5aERyf425PyP6PcTziOcHnojNfKLpnNf3YDg4yw+CbRC4UwrSlzlCaOi0xCU/OrQNhAB2lA==","shasum":"c5a9d4054ec048f88b617b2931ed28f0cb84a504","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b99c77d5.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp2gCRA9TVsSAnZWagAAa1cP/jBTEY4HfLDFcwyXCwW9\nWLqSHN81q0KIQ1VvCWETw/hqc57tt1V5u1U5bGLvSkwaQLmiISE7j+zOwEEH\nsOlfTWF9XcJhJnERAi5Pb9K6vH91wI2jELtTrXayfC5t1OdV4S+ckodC0yN5\nTVp5hnkdTVNCLD9yMQtMbXHMdweZX9L9eVAN7XEVrX/JdyCShGeoQSyaFStn\ncMVUp02W2eMmhG7CmicLc96V4xRWgGvo33YTl37gV/9XUBVGVHyY97HBGzY2\nd/5NwrPWZjjCx95vgRZRLKteDF4oErETmmhVbFVHn7i2V3RdeZ6reEmyCOhG\n11ewsaTKQS/gLPk33o8QuwCusQGHIuTplucX0UkScIUTlWbvqAXERuGsbHVy\nd3JcBNcNMkxmmcyY/OpcNO3ynkx0Ab4h+KwaJ9hnODqXmru7EAtBZo+91MFp\nv/x0/GQRdjE8kqJ/C5n+Tk9yoeGzBXahqX9SQVYMDrNhMl/5mBXEr/1cVcGu\nLS/mrck0RhsMDkLHwzc9KlXTBvLohnSQXNuJ1mHIwN5bn/gLFCJSzIRUcXI8\nw1KE07akEea8vKi1S8R3NtO53/qwpzUSB3yI9OknBAwCeeUqfLu51B3bkxQl\nV8YGJVLnz4p7/8kCWHsDbDqPxsbydfjsbQGIdrdoYlFilF26himauFnKncOu\nj9zP\r\n=VKMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB24y2Vrf3VoCk5VPItjjEtkBxlx9b6Ut3B2WO2IPYj6AiAUiEi8sTNJKhag9LhXLYckppxbnIZhNGTabeWfM4Y0cw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b99c77d5.0_1622056352261_0.41612513497336723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.0de82c12.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O3+HiL12anSHkjE/lXYzbYnH79nhFHY1fNL1y1Rzh21190qT3IGOafy5HTeoMr5EtnJ9DN7FJACqsoMKO+iMIw==","shasum":"783ce7da4d0dd512f5bdd83f3f7be733b81b4918","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.0de82c12.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr3mCRA9TVsSAnZWagAAF2oP/3q/V39kfraK+FCoNasb\nlZ9Cf+DtnrTd7gCEOfSjCLXlAZoRkd8akj/h2cx6mCLbFLF8IEJaOLjKZILg\nF9QVDY7bE1Vakmji8LLHvMMnzKgKKCflc4qfU9bYRUdPaFQtkOK1lQVujKPT\nlnL8iR7edDtP5nFu9dI35jHhTLeZ8GRpaH3HDtlweC1hweMZNZ6KX4hLS3f2\n2CXzVyJq9knEsRNy3YCFogv6+4DpmqnsFxXKrWnDO5u4+YevvykGX+ERwxJT\nPjRBfOKNByuilNEy+s5kJopHFCT2k/sifxgbPZC9v8ZQzcbbQrDUISK5SQ9Q\njn4EwJkJ0WmD/8iV7gnFEnR/Ba/JZN7lIkDgQCdiBtijdPMr5snT/4NvfaAe\npb8PyAIMyOcQtinvmEtYxtv2Hp86go9bIr4McVE9MVj4jleR4KIesPRSAEwf\n4H8c6X6qMA3NjDF+2ynLThQ7C2BtTop+pfnJmMv7L3nj35yudkY2p1jcNj0L\nI0/XFRtfeDPcI+blFuoHPFAprMX8hRB9VjO2V+3jqd/WdnuJ9YVouLjYLxCa\n0bTBh5/e3NkIcrTRimznNjsO8+2wNTUViiQOo7dWUW8v1i0sFVkYjoxOkLxk\niewEbjkQ/EEHbt+gB/TfEr00vfEchZHFkTThwdRs/7GnFSLm9YesYeqVYb57\nh1I6\r\n=jSJd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGE7ubFQrDT1Lm+nqQFt6Bkr5OexUhVhS8M9MLGfkuRAAiEAmg8RUHWGFvI/dAdJNf8uNh7AoZ9XpG4a8wFAuiz5qrc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.0de82c12.0_1622064614437_0.7175143911203747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.227a4614.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WGFZw4pkv2ANnQUZpYjwZPYIXuD45wqAh/FkpSEvHrHEgS0+oQsSIWCWvO4SF9IxaVwPI1OUagPf2Uodl+j5nA==","shasum":"d75aeacbb40f2e2e3defb737a94bab28ee8785e9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.227a4614.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8KPCRA9TVsSAnZWagAAG0YP/13oPwIOc3eBQYkGaSJY\nFlqhADxV134es+X8B4cJM+9kwLOPBgvby2mJX58bEQe6PFL8Sp4ybN8D+rN1\nDLEvuoLiN7wtBxMB3EkklyspElfH8NJxOJh3jZRizw+yrH0TiThlhxFERITB\nXcN5Jsw7qOK34slKh7JpVlfZn4fxDzQWRmc+q1NdvyMwLBdgaI8SFylbbgxf\nASwySlPFLOznZpa7QJEV6oDTRkRovRyF/+0BEeg4edpdiRonNr/zWwmw+yCP\n7foDGzkly639vWEmYGYDfPcBO/zgKDWiwT6q17Ehjodn0QgdDyEDgm1J0qNe\nQQw6q7uY+yDVdDLEowlzoSSvOKvT2sx/J+aQLNlVWeBWmVW0bssLT+YIm5BN\nyY34eqIqmKBq2BKG2AYHlwEGI1bODV+Z4qlagk0JOsa/XBCa8+UhrGhnRNKZ\nPT50nNsXkbd0UN68/zF1LYMhax1MBdi/iurDjCKBi/7jpzCsN6+L8L0HSSLP\nwyRMmHG8MRj5fa+IrqWNA+BAoN6VI4jhaqARnUSeGuL4+8hO2YDcXWSRcBw1\nsQYr8VT5O+RLAZoNDCVbH1kRoBSsjGpUWly6w+/MgYyb+OTRN9JkZn16ouEp\nJ1p7UdzHPubBJLd8Fi7rLBRY1SUGh4FeKKPj60jwtOQ7lsWiZnGmCPmROMhT\nbO7c\r\n=TAf1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDgNJvAAE3zPU4wPyNDmeSkBcNhrPit3MHMIeKiFrEWEAiEAwDxua3RJtbx03qVIY8xcM++aBRz7qk5bKHaX3BpJD8I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.227a4614.0_1622131342470_0.4017612039912395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b3d21d31.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UZCsJ6st00Bp1Jr5mzF3KhBwB/6RzaSKFgtRe8CM7MMYI30kY6DuKTZMAhCv+yaxjB0HcNdNHb1Xn3GD6UYt9g==","shasum":"1024e3a1f5530166cb905dff06af9a2e2f66df8b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b3d21d31.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+iJCRA9TVsSAnZWagAA0csP/1o0MIn4MvG+dgPvfCxj\njTHOJobI3wFEfR7eGySLHtjpAdgBXvJfDBDqFfK1US/w7rgsiLw7pI77lxj2\nwlG+USJDNR23N3hQ7Fixi1rBB57260rY6XWudbPi/ZJ+eHSFbRqjKSku1cFF\nIG4W0qaoS7j90h9s202dy7rLBGt0AevrKBDotzGwMge2vR3YUBOkP9gL8ERJ\nREryqx72PJ2frpkPCkWZILnsFQqI6UkXwzAp74X/BdNU+NFH7Bds7f/Y+Ddp\nIgn2Dex7nUC6blyYIA87VOjGOnGNnYPsP/sRQWdDV/dOWqeriiLS4d/pDVKk\nY1GIZPpV5gtOxpAMqH7ioPeAsiy6sv8lWE0IU4pT0XVt9Yn+YbZ0yEfYSo/U\nfTiq3eRHDbky1X9yyrLtMaRS5mNEQCa9pUgN723plmMbRgptRNHu63pS7jwa\nfwFosTZVDVqmdTyM6govTX1VEj+uzaBpO31HV8Wk02nKT5/jcnNrM+SLQcwN\nnA4jnV6d8fxPSjmKtqV6oIiDR/YGgoT5SNcsSzRIL1yuu91DwP1WWU3dVksw\nZMWbs9Plvp0tVmwLj9V0ajEthJbx2iEq+AqQt0P7o4h/1tcTPkRjEqhLXUic\nX/JvRiXBy25evXrSvI6q4LALKK+Kr6/ej8cC0fxUxKhmieONNmLB/FKYHyUK\ne3iB\r\n=qnKZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICc9Xm+y6o6LdH8fXF3WIbWFvBj4MgeKpOgmL85Os2o2AiBC2i76PcOr+SkvJyqA499jvyhq8Y+uphLE4pHwDjflzQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b3d21d31.0_1622141064881_0.8443150067289666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.288c33ec.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f36X8CmZDZCAZyU/drg8yJxZql0L9XedSBYIhUsQR7NTbc5RmYr6+2/0valfLxJmIc9gAgIkP0/Ui9Wf4+Nh1g==","shasum":"ba7b593f6e7c00c5fe5da6ab4c7a576f8394e139","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.288c33ec.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zGCRA9TVsSAnZWagAAwikQAIVTizRfaCnZKvv4fxke\n/f6O5Fi/uEKJoOdOG8SeA0Z6WFY2qLERAOW265zbjPt2KmnCq7misRRxj9a+\ngjv9TkDIMt/CuQKoEUG4Km5yYF7xgBds3l4uZbihoKWUG4OghN4guQMl8NQ6\nZwWMCNda7VLbUr/+WNxSNj/KM+xwNXHLmoxOaFvDDDK8CWFF6TC6zoxi2L9o\nFYjmlVjnKbl9rAuUDQZybHS48XNgy8uHMQ/7W4NZt+2NvOv4lnWKEi0SlE5C\ngknJJ9JhZNIxlDXyLkx0t9LQWQMBHmehtlHF7PE6hQwDjxI5lan47zEZvySg\neNKtdGcsbzSPgjl6hoitO1EcoZ66xM7zdZTBan6eg7KORNGBV6tl9IS/kl0G\nq/CRwIBHjERflTY5tr5Yd7NKsTy1QvJQY2Wzk7rBDz5AjZLqL0OqoWd5MOYI\nSPrsV2l8U5eAvxNlPCahmW9whk1F9vyu9ZHC5mkXbiztRJ4w2gt/BAN+gUbv\nXwyyCZnDp9/yoOve0bIAHE5RptKDZTppZHGEj9LlCvofAhF6d08591cEY2UK\nwrsior/w1kcSt+QMRsk4EACGycMYy0h+3uhhN730/wGQP8bkUbYAYOMgktIz\nB5loVrhHH7AqgHdY9n3oH5kWH5joFOgrz/DJmm+xuNt/GAdH3j1SJX+wivwM\n5sid\r\n=bmCR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyL+QrF9j1fDA9mQWXYRxBP/H2TLFkTWyHT5rcKBXqbgIhAPxRHQFWxfsFODqj6HiVTD4wL9gc7Wep8CwYVswL8C8f"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.288c33ec.0_1622662342138_0.8710384013266241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.7eb7ccb0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dmPIyBl4yQF/0Q5t8SI5G6Y3ezx6Ry68AqG8VUTgHx3lRnfuA8l6nIdcVGvmdsTmlpgt009GAbD0tQBkHWnD/A==","shasum":"b7600480ff4fdd2c633fe47e9341aabf498ea68c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTNqCRA9TVsSAnZWagAAc/IP/0btsFxWcm5itXj5+Ins\nk0S9ZxIW4sFiiLEjNsgvN4ECKn8jKLIyw/DSIP3egQcwj/qnbaGmbxbQH+5c\n2z6gq2XfSrXtKYh2lbPvo2hPBtyzKWjGVFeyjHNyT6oo6SQuIYMDpAmEHuO6\ntFy+66InTqwiKxlwpBcy5DyRvx4JtDiSs0HvInqWj3YBVgLp9MsL7cZC1EH9\nDVZf3MsyitU9YLao/HAJCqUbCEDGR+aiUblkExwtDg44/mArPn/omQCLZBb5\n7CgMm8eBt3pIqe+mV2aUG0/Xx+sk8TzDwZ+8XUXX/VZPAo1wxcqmsU+4SsPo\n/S5v8DS4YC5HTX9Bf5J7342BwyiEuq8I7gcabzrQSxBTay/rv3KpScpICbq/\nuUGamOkajOIixuskGtV73Du9lWuGsqW0Tc2WNYkySDfmMJ+ENjVbKw85H8MS\nQQY/lm7xtpPKZctjKlJpisbn5qfN41N4kVxtf5+7kR4S960ZpYf95/jBjEZb\nxo+dPz2KtfzLv1+ZOvS8/dqTiLCxNXuCh0+Y9wn/ddOAtsoq9s7OIDHL2G5T\nnj0Ogi0hXvYNTpD/KugtRZXQ+u9szX2XqoBOQRPnsJF0ZduR0Yz9P8wFc+W/\n0Ln0BFYPEHleNyWJ86iMLE+yUbeG0V9Hl2ccgYZJRDxc4rWhM0g4ZePL+vuY\nqY99\r\n=JxhE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2+t82azN0fjEfF4ksVviXYVP7gkcO3pq6ofNP08jNXwIhAKsCKliH11FyU0lHUPN14bZ2g3zyibGTZkntJcnjW0TX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.7eb7ccb0.0_1622750058074_0.4645713044578119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.7fcc0726.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oo9XybXhaMd2s5p9ct7STxcIOzRmfoz3WgrpPqbfPXDVzTigp09/od7fQUIuRTZ1uNTmsArgyahrs2OXpKNQxw==","shasum":"97104a8cc76be280510a4cdf5e28e4be1dc1a22e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.7fcc0726.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr1/CRA9TVsSAnZWagAA0NUP/RLwSoIAo7EY4qYty9ol\n3o8W7pc4uXZetg3tN6nE1VattDhd8T8TDM1q3rhj08lCesPyzPH9gtlVQ/8G\nEGxr/0dprBnFyt0cASlj/VF7Vwo1kdfqzPATXM1pqLkBMUW+BuRI30GAh8kL\nrhBz1licbENC/lZrxQunaFlg7a2ou+H7WTnqy9C8lYbL40jXBLWtZoEVOTaz\nBnCnNyKE2pg2QsLFELCXWGEi0J9o9c7UxdYNYjjzm3u8pnx59kPAEl9PelSo\ni4LePhXLlvdBFjx+zoIDzXN0zvyhRjHQLR3ZmUfvOR0myg3BNm0uFqA9+a44\nSChxQeNmj8sARxBAPZOdnHWm2tVjf7fbLQBKbIWJO8Y1GuLzXPtYVFw/c3TI\nAo/OnPuhXUPZj2TonF+SLVlNSOG4xBmAsuavMGslX/Hps5gRYPYpR2vWGptL\n0MEhtKXYAgZSVKIxc5Y12naJ55DHuaFisw5obyQVutqINzkxPEkCWUsk8DJG\nyYnmUWFK7b5LrNEqR00OS0GsUzacI6vi9ijy3OYYp17+9XQsN63m7UFRcwFz\n78grlpKOkWC/sdH1yghCGXdjD19TySJqhFJtXpJSq/5qy61qb4A3gUYgR1YG\niZJhWAVH0iEu48rxWsJapArodhCkmWMKVTnBj8uzzA5J3OGfe84lpyfVKdWk\nDm1z\r\n=NWEH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWtJURHGx4p7gyuF9a0cjYq6JNQNvzwJKScOj2tBEWpAiAhxc1k8u+YK+4rcYx6rZxLqi/e2emuBBA4ukkU5cr8oQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.7fcc0726.0_1623113087133_0.5199096461893431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.220a4e5e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5qtmimrxuQMjPbD1tTjP+uulNl9KmnXpNLopllWKfTtpNukkm/3lc/Bq4ifSwDMs0lGGJ84H1/RwFx4LOkU8Cg==","shasum":"3c65aa1b36d5a870fd6d24326e1e1189adf8b626","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.220a4e5e.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv62pCRA9TVsSAnZWagAApQEP/in9ZWdjMoDCNfVyXMkA\nn9XPnDaoTn9a5OQUPlezmsHBA0CUHFjPxpclBc3runlR77kjFH90Z2K1iXfa\nkNR+ENCc/qi+SyaikZu0t1Hj8kCiJdxeGwLfgp9p/zFqW54BqUWUKoGe9apz\nbWbsjjChMKdw1BFKNfULd+Q1Xo+qFm8XjEIQ3u1jwDTUPWm+9zCnkta6SpGQ\ndOat/fNmqnSXul9CNTnXrV5XDixgkewXA8/ilOVCbwChPH4RVApcdCARaLjA\ny5VTXrWaL+R9RjxbSjsHkBzG/C20PHJ8z8pyGIghS1ZzqnvXwDGtzgKXrRl0\nN2sRoiACMNx2d4MzPGD3rPksOfjsJmNLrWj30zocPb/NGYqLUclFqOFtjHuH\nUAANDDKqTS6IsBkeokbNWee9w3YW+4lMi8Z++NpmFsMmAoLqe/wQnKuo1Q0U\nKRiyCA6SQtT/iK41PMDNBL5atirzgv8leId1z7i7NCHZJ3wdf6zK0JO7z95S\n6FW4A9Ocq30FVSNI0lS1xV6sTM9mKHNHSnRB4xtFnFucsW0zM1KJscl3RdRs\n3qMm5wCUkT6m+dEdvJdGgvvt5JhCI62J3lIpSoiEqERuFxjLeJtT4kvQOYZn\n/DiEZ2FjJ+9nBNz+3P7oJkVoQTyKbtm0EmyoUGnjDfq4tw5NbJg/oMeosDyn\nEo2+\r\n=L1WD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvqrrowDrDPW6JvhwUT+MVQLkb4XLybkOmVZTVs44OEAiEA+RflYfhXnOVN9ezJ/bigtet6JCtxRiFJHLXe1+p+EDM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.220a4e5e.0_1623174569688_0.7637458897979923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.6b2d6ab0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ydUwRy/9O2TxDhLSsiAo7CZ+5qID+Jp5TlX7059QnmAdEd1jqHYsjxAqYiJxXEaDdlTah9KI1bgh74Jrk9pfbA==","shasum":"714135872b31ac1b62484cb755cf894baeeca4f0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7iMCRA9TVsSAnZWagAAbnkP/iZh5NhAZHSzSDzXktw2\nksGOrFqsVY1mPOdlSPcR1rw5hwfak8lfc2DIGsEfmq54mnm9ZYfgEwO5n37g\nsn0mx6Tmn1K1G/PiETkPZorW2k0HjKNbsaaJ04uigRLzHDgKdTLEmZcvsc8H\n52XmEKs/xQ0IukgpmHlJgXuNHXgRZRz994braDk35LDgupifWUzgDi1WgkaF\ntHkW3zisPxMv96eGdYoBRNFOFe1ZbhqI8DStBCSfX56qOIa3d29BeGPSQlJK\nmB9woOjX1tEub6ovlrG3PrEI5tnLZzBbxn39IskUbMWm+3E4Ae32svhJYAvX\nWvX24HZTZr6uHRIPQs7W9phOEM2hgSttBsibij2+oRbiue/y+x40iNBXmBNO\nKrUuQvaWW1ydXChdFIFWMcDzBhdOoB1bm7Rv4qcLsS6YcTYItF/YyXKjZeDu\nV91CVm3WRzCTj7dNRQJLbABRxs4dPu7OkkRYcWLifTEcKz8BZBVDuV0OKz+f\nrcCjEARlzldXp1d8fWHXHcojVfIyokWgpS4I01XG5j7whxSP3TfPfJhLqJ6f\nSPXa6CLFnklsYBHAV/TQcB39iOlVeAuKJz5XAdcRWy34csVLCGcj6C4TZ6Cl\nhtauo2BiKrjbqtyOWKQoOhFtgv9eYCwLw0PEyjxjqFENSKuigBOjCS6rtRxG\nbF7+\r\n=ARC+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAr2eLaBHmGbW+RVUfvW4nPAPwih2aFpXMm5q93H7AxHAiBxnG3F0L4Pb9T6gGIdpomd6zxFOxbZWukX57nvAH0Mhw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.6b2d6ab0.0_1623177356492_0.9257002308994497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.2b20825e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OIWotttkz0kIgac2RTX1jVHmdpRhPyuy9uytBQUjRaDFCArGh54DcaKV/4sxucCDvfDGuIGkZYj217U/vfQspg==","shasum":"f0671efad6cdc73bb75a0cf795f01a088ea00e04","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.2b20825e.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZJCRA9TVsSAnZWagAAVnkP/AkSegeEbuRAaPSPYGXp\nhoHqZenduBCZbDvE2PuwG0Df5zbiTrs7SC3kuLZtxSh5CGpqbi5O46R9pksG\nhSd/LGlnhZNr1zoFYDFEv3K6FI0Txcc056Sa97xwe7Yltx1DohydqR4J+tRQ\n8irHPGySQ14osaoNTQcWxOlhp0ql6JUov3mea9mHT84mnRngDKFCjbzukZAh\ncvIBl/5m+9UDQkp3slKVTG/NKtDY81dqyCffrD/uSS83xObM5b0a5TjtybSE\njhoFxDcL39URROuPFA/05G9/BrfAy9unc0/5kWGM42X+Vf1wpQ/1ctH5315D\nydHSGpyeEJ2TAzVk8oiiLMT7l47GIoX5h/kZOf4WmwhplWScuMEDB0wMSYMT\nRKeFYJSiOQ3xF68DuNfWXQlY7GQ7ij8t7hXYHMLwtUwVH1F0A6mPN5yguK43\naw7gMvHLEMPBEaoBlbheIpjj5Ocqbyhh/0HALQmFTtV6cO+PmpO+aulP7vVU\nGcGaJvxoBJKvKF7aqB1wxklHAKwY0hZWTKbomdZrWlm2+TyTzIMc/XKnjPhH\nh78jERcuxz6mGhmGJh4mRnU35fmsZi+AFs7WbxJ/Z6JPjw+5+H392hK8j4up\n8pszZvHIO3QxII8KeuQw/dFe/ppRkPdwjfGrbje1q+wehvOKYaqWuM8WbLhn\ndbW7\r\n=kHOS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS9leaiyZC7CVFb+dzpCo18CEGXxEiFTpxTBK0Iheo7gIgKnumUqmmcl8bD4yZf9Sq5mch/f7Pke2njm8av1NCDIQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.2b20825e.0_1623455305204_0.8888346301770156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.e1511867.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+4rj7u07iOzT9v6XxusXFJ41VPe5zQV8SBAlM3vltU97o+NHBawFepepYZh4Udbey7LqNMtYU7KBrrlYo2R6BQ==","shasum":"ca34958582eb78e213bcc9d4b18aa0e5e12a2074","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.e1511867.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZICRA9TVsSAnZWagAAVSYP/A1i3N4wg36d4dGqqfAq\nW1Mrz0bS6SfNbM3E3ZtazDpe2FAc/OV0c63XyTRMnLJFPV79pZgxfbmb9eYY\nSvthUR7Rk5oobB0o1ur+TXl9u36rb+c6yDbwlo+/hw3IxjEHXW1GTuO7hb61\nalFbRKUl2zr2NiTS7O2Jy0EZh3Cehwwb3yaRfTlriQgomsO/weBfM/8rh2VB\nEjaPDbeWJct5H5tu8hbAbWv/NaT4qpowyZopiIISQcZ3zM5G4WeBd3+0C04H\nOijMPfzb0+T+aMPeYIcPpYw0NKlKjAoe41lT4gFriPudc+Duo/AjPEB9F4rg\naUfMOHBvqFg6UiNRV5VaIZwBYz1jq13YxcjQi1ALxfj6FJLDCk+HqtDoPdBq\nyR3Ozj9wrjKT9FeKK3H54ZstF2OK9f8r90Ci8pc3y+H72UzEVTHxodSOqXtZ\npNh2txW07XBoAkOP3+VosAM8t16qxBWfCpSRT33B7GCzaaDkmrDOf3dxlqnY\nm7MjjFAkdx/wzkSxkYGHMVf4Gr5DCmdc0WZXWF2YrvMItCejAh8QVyLlmh15\nFihev7TYt6S5ukR0xwj7a2rv+c4i531hbzKDdexiCmMR3aqCZG9ztembTRd9\nWpWdIAEfoo5oZbpiir7gcxHzi1Y2o9PWOIQugaGUZoug93jPzFCbW5ReSZQ3\nxICW\r\n=MyD0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXhUun2qFOwouXWvcl4iOUwAEkIlMjvZAGlhLADcq7TQIhAJGM2seFqQntyNrDUKib0ywrQR49mltdZ53N3t36UlJK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.e1511867.0_1623459400325_0.9673992078516973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.ef4a0c0d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5BfFxj7G4jml+v5krJw/M0dsZffW6ZtqBEBfFs9OiI9qBaVcZ+ZjiASy5xw0ghIXO5rrrudwuijN5TKvqHSxZw==","shasum":"011892f8ff77657bc0dc4752415fd63e6a75ed85","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQSpCRA9TVsSAnZWagAAghkQAJpdF3sGdaKa95wK9LOL\nmzAnDFXp0OG7kYSKONGMqczem8w6TlYRI8YK4bA783NBU7a2tr8xenJH0YYn\n3ArS/KmFKwuoSE71FqT+DRZb6X8P7ES+6iP0Oe1hFxQAjwJBCCcy1tg96ezu\n3Yff3yhIC1toEHqdURVxcdkKHztMG54h1Mg8BfK6DxUHIS+u7TezN7SQ4v12\nSsHaS/mBnNb1GfSIROwb77hs6M8Qnk0QWTGUOAWeMfs9l0uDb9f536015EOJ\nPL4G8GjnqA3xKzP0NpQkNtFCddstwzJfApXp7R2ZSZGbspGDzUn+dY+fMjjk\nCXSy79T2Lo6uF69SjyKc4K3It4iifazpbWVdbJWhN8r9SAOaAzTP7dS3eioI\nUupknmLglJId6dP+C0vzxIRR/23VYoRJ5X30GBJXZsnE1Db3Xi96Vn42sLAF\nxu+Q8xtG/GA4AY629AtmiKV+3YiWCGG7cuVE6zHbaAOY0HuwMRUSBkgRObDl\nkGrNB95c6ERV7/5IRKE7zXVX6QPAwoWfKpkYIqpbOOESorPk1xbExZSoqdsE\nRXvv1XZ9NfkIjDdPP6NQTrAINx16o/1VCT2QM4J/6NKJRJ+knwuHKeDkHcke\nWzYbq/Ddjye4c+SA3daAUb+VVACdEwWBpZPy/Uk5Qrtqq2IScYT6WXlfA7s8\n/1/N\r\n=hFZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFnNtouISp36h4+zySMZU9/AA3M/k990VNxyJe5AmwjgIgIyOKaUuxjIDmEI7jIO1XBwEePnh/bxaZrssKzU5zsjE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.ef4a0c0d.0_1623786665664_0.7163304069993388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.573d8913.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dugVwzwGUhIElFl43FsZjj2F12iYwDqoY11NV4F+bVMC1XBIm2pcu3zWN+aMeEB7apO0X8qYKCEDZpRJEHFU8A==","shasum":"9dee65e630bee418d45b7df16cddea82311e8a8e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.573d8913.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSuHCRA9TVsSAnZWagAAVAcP/08QM4wKdCjhMehPK/dn\nXrem/1ywNjxlxUuKILB4FMXkLGhOFjQqZJcL3rHsuwaFqSIuwH5p88e3n5yE\nvRFKor6kCwEsmMjmlP8g5uh3LRb/dsnGg3huObLovm3obp2HyT1ithmKhm0N\ndzYEdBfZfc5mrIVyw/xRN6ion2/DJUp1RrTNcmwIrRJOKMyjXMsCsLknp8dC\n5x0nDAvGwrQI42dhh4a6g8HVOh0EByIfAw7XEe+9DlY1efLLfp2qbreTk4t1\n5y4UnKAOQm2YvbKZEjNYQKbJUMHf4xjmsBdrxoTm5cwXq/BYKbnHoJc8f64G\nddQQNaayQdg9yPUpVh5wHeHCMoYndgSXXoxIH5tmxqzKbdUC8bOr2Q5zp6Ii\nLGz60+PDshUQS9jHBk3Smd27SasyCPIOn37dBdD+0LvejHw2ttlA38IX4m+G\n9FC2HDVMbYiHeFVFvNUI1ErvcqKCuiKcURrOUrerF2+us4mKOH+B85qeeo8W\nY5cboimlVX+WP+lVAurOfbrKmFCD9sveORnpII0fN/Uwoj6au+NCHFgbh1JW\nuZzYjnIequKGtXjhW9AIp/rcG+mNXC6YU4OqrFxU0sK1g8NEK6+wGcQMJX1c\nJBJsXIVpboMkkdmZzAJG+UokRIX/hYuKOtR187ilqjmBCOMVt4zfhCbl30jE\nDBu7\r\n=5ETF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaJlzYCQTHKJcEedufSnXuf+GMqMAieKyewmPEbkevawIgWFcK32/uU7sA2P5DUhVKl2ASU2fWjwtcQLFmVbpUiP8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.573d8913.0_1624058759351_0.5933840501747436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.21dba001.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PzSAj8vHhctWWNm1K8Xl5LtmhrW701pSSl4Z0VTJSCQXoAoQ8KoQvOAPDZizulDQXYDc3yh/6LczyjwlsGY4Qw==","shasum":"a57e5fa2adb5186ee8f31eb897d6d072ea73ed1c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.21dba001.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QciCRA9TVsSAnZWagAASbUP/jGf9VBSkrKRhYQ3Y8D4\nKWP4t0nQkjhiJLkCElmA6Nubmi5jqr5yP3/eB3D67yyWhh2gl6mGa//x06UN\nztfwRcrROMSKwVeieWWsRUpenopTr8rBRnpneYgAWd0BJ4TZFAfbteWTes/Q\n6JcZK6pMfhBxOuyFhLHFQvLtxDHuNq3dIyZOYoBOp46RqMfV25Gm48ms3nO2\n/tzW/Sj2ZzS/Zqj1oXV45EPXw4rWajEs65bhjnLqJv/5sbdLK00qadiKnFCZ\ndwmgAeSfXxUUjLdUiYGIKTrb5xoUUfWAKLHs9g4ypouGgSp0etCwVF+oBVir\niAO6/Mb/gB9lfMo1eKqSW81kPSd0CU3/xSQqSgF8DWASMThK5rMGiX9kIkfb\nkEI5pyU8HEYUdCYY/+a3W8EsatfOZ8Ein+x6RH4zxl6VlGPamjGUl1BJGfG8\n/TKg+CksnnJ1CP2Qr2Hpls8C4KWnpC5K87u4fEOV9mOU85M1SuVPE3GG5DPP\nhpZmOiQZSiQr3wphB/ooPI55uB6q2SDyXj3qGqir/epo2fRCxksMqW8jcJpe\nAe3/gl9bXE1PuBDOcwK96UToxhte3utntvbfjoGw5a0Z17JZ/1NbdXkpH1Qo\nrwukROKI7af+ao3AmCJoAdk5eD5i/0JYCHdfhskp64zXuy+MGXfVmAI+O9Wr\nfP1J\r\n=4iYC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8EHtNNrFsL1fG1W50PkrIMLtmBj086Gebtq0RCzeNhgIhAK6tXpNVXwsMxIs4XjWFnWLh5/Mh7Jt8ucef7a3pGMYz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.21dba001.0_1624311586304_0.6531452110034797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.6f5bfd0f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-45eW9eqlnQoZHamOPk3tQJCYk7e0KlKAQ+pGaoUN+UnAsUEUAmuItZxsvOedvuwASxIiidyqOSxKMiwFHcYtEA==","shasum":"0b30db7e41b85cc296344d5e85d3bc26fa777287","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q1bCRA9TVsSAnZWagAAy5gP/RUqE4uaZdJ0YJfBsU10\nsoQN/CwQ4hTZFRQQESf77VUcYE5Th8GsUtKUh429/H9NrKI19dWAdNq3olkX\nc33dFoH9jbuSrt1n7DpJxcJIA2U8ofE9HyATa1i/9a9y3p8318UBbS0XJPDL\nuYIAI7r8uqI36GxsJZZ/Y5GwikvWjuqzOtxW8QpFv1eIOK4QzAJ2vXjCrDQN\n+RGEI3b9M1Olilx4Km9sLxoXwXkAMO5vTCGH3ZSMguA/SRafvcbiy6DTvEgm\ngWcyzYLcLB4ivH0YVC+ghxBep5cR4DgaNivGMBtV6V5jXrnJwSe5pCH9tJX9\nI4FagMjGf+2aXPP4DY4luEsAGIobKcyQkb6Cqq+YtzIZ4t2zxmJeqyz5XLIc\nAPEGDAHF3wDOjlR2bf1H7BIzlFJozh+A9n8H9x9dXpAGJKDB30M0vzP+nnKW\nZkbNvtR5MA3d7cqi2zHSzbfGkbHzxOHAya28wvMq4P2ZJ8zESAmwQQTNKx1o\nQ13G5rpOnTsZ0YnpaWOqG8A0ayrUX8PYtvFH9mrLTlU+bWar+rjvJz2tw3BY\n3+0bszA6uXwI8IutIC+/cXvlybgkrHiQ797WRA11ocBcl1J1yNLd3i21osud\n0RM/ZY2uW6XmS+cQMMbP3aYnqmFoOc23JXXSis20Tx/399PuXp1GrUToMM4F\n7FcP\r\n=/6b5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU/QHN7MORaRMakWy54HRLWKdB0elebXtzwq5XgEWOhgIhAPWj9Sc/mTbHaYtG6608CJHmCTofzh2cG6ValwvfpHma"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.6f5bfd0f.0_1624575323374_0.7697063938648219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.fd8360b4.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-secf0+k30Pof9JzaVXwMLnwg4x4qMSX4DDOkpM2Q8UJf37a7cebPBFS0gTvArPG75Sqz5sBHIRVCR/e3mR/KkQ==","shasum":"59ce90f42ce88c79ee409c4652b58bf9b9513608","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.fd8360b4.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1imjCRA9TVsSAnZWagAAXeUP/36xpI0BOQlAkwPCNmFp\nlHi1QorTlEIDJw+B2YMfSB6qWgYZ6b+YgF/QY2VTdKoxkCbi1tntKtbd21VS\nNkcTJaF0LhZ1cMxJQWSo0oj34/30hhwtl1UUcUb591nP4XkvIX4MWsuijTpd\nAdRCtPqPd+pLMQ7RuooaNopAqY9gBVuC3cnvkE8nLsIbAsnQvTDzvVGemR44\nkbbXpVG4DkhTjvXx5pZfX8Zk25JT4l3QVlf0tkVkObovVC8r79ZPGsSFiVue\nAFsTupQIWq1T7bqgP6sHDGWH3xmR5UYERJ3cmFenbA22UIyll9zr74WalAp0\nIj7EGnQiwolM6ATjETDmr/oUGRbS1vXJDhRn+rRV4zZfSJtq9xFuN1a0wdUD\nirReS/FfUOKF47FVuvcOYq+4fWqQopBMB3OTr4OscR1ZuEHeA+YshIrm0+/c\ng4AKo2fUm9RuL4etp2j54fumgKbkrqFaD19F/UyJ7wjhiuX9nHC6/0m70sk1\nelQNII/xOUiGhgWScmZWZbk0IVRq7kyZ9aJAIhbPsOB3lQRtU8witrgaPmU3\nxms/mkcRYt2gPiFq818F4DfR09qHtK2ZojHQtcFe6P01jb30lsW/orLA4bHm\nLpa/DMigPOcrDhLSBvPjVNemSBQ0KE10Ax5g+U83CWDzwUzL/pQedUCEtU87\n3/TY\r\n=GLNP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDrb3VHGifKBQzBg4Ah9VRXshhWn2B7thmPWD5i4aLyQIgSTzids3VIayjeEJgo8kx/BjfBF3WkCE2esxC9T6bV1I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.fd8360b4.0_1624648098981_0.33830084959488893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.6f74432f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1t7m4MQohB7aDAZ8T2chFgCm9wz0WZYBaRWnamSO+wa/xZwibU553G6DFgsO8kdNd8e/XkWsgzIOxYDqTLtbxQ==","shasum":"300a4690ac28c65257a05cbfb3fdb6719519c653","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.6f74432f.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kCXCRA9TVsSAnZWagAA9xYP/AmUctJu+cLcF4db8QZI\nFrBOro/te+VFvO97r5Fuw7odvUqMz5fNJHD5wsQeMXYL126DijOg606/5Qko\n8RzrMZxIGcmWkJ5htEROhl+kbdK30BGgvffLib9i6KACTwazBizLbpcxjcFZ\n1f0EFtMjDWJb6CB+uOW2wj4TczDQddioDcrKEHXCguL4A2ZIObUyPQse3wu0\nrwQmt672n0MrtzFbl0j3e6mpwEsgl3sC6ccKrOQO38MD8XeiyYVkdWCOE3B8\njc9rCUpN5nk8TBRsssYEdt//zE+1izYjwiLjvKP2Fmu3/JumG/fXMDAqD4nU\ne7UCK2uueux/JechFVlTapcUZGnx7rINMfvWpSAgbo/FTPPmCGoVUvT05oQd\n3dXg39vbbD4kHH1LykPKH4sle79aL8jgUKvUO3giYNnIN0NaoHdMB1N4rJm4\n5IBzf5PJUplD2RyZZcbph9wmw+8BNBFKDEj3Y+Fw3KpYr2hXWBEqNG6VCQjU\nOTI/VPEvLrdft98uOCdpudhOpdfO3exuejE5h/iAa5TztCLjOmUczhaFijkJ\nq7vUucoK1YTy8dJAFqr8sczaaxSh2rAOpK1sFV3V2p1c7u6woeFBLPcK1BAz\nMcnjBxgHmhNvrMLJrQ+u7RqZNiNNUf/arZw4D3+a1wKiRYMbc1hnjrU37R81\nf2JW\r\n=gTbn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDda9/ry+q+QWyLyXase8sXDZlv/VZFgLDA1t1+H9xOkQIgOzEPj+S+Ly7frI6gfMZXDshrTJYceIjDEkO5ZTPlS2I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.6f74432f.0_1624653975014_0.13684320496703206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.b62f901d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PUa/9/5rEVv60QLSYeNPi4DC+lyeGMikVEiUifYhm2kiBAX2dPKVo/9e32R4KBYy5GD5pwlVn1bkp8aAgMmN7g==","shasum":"3413c7d5e3fb753cc0b99ca7a85a87384b582c38","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.b62f901d.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXBCRA9TVsSAnZWagAA39kQAJQF1rOhw+Fo8OGkvbqC\nVK1AFl/5OQl1KiAI7CRDNl6x4h6GfSYGN1Skm3HoZjReFB0e7TnDKNoNTYNU\nEZP6uZKtVchVkgRo0UeT0AFQilbd5LYmt1+dNFfadCWTvLV98j12eTyMy8ws\n57cp/8+AfVORJhkHa02bpi5AZ/cn/9g2oFBJGvZXvZB2eFurmTPffnivjnnC\n1cqXpgF3R/7NzzMa7Ub6Mf9OXC8isX3hhrBEoqoYwpZLPr2RBlvDsqQRA2wd\nVAwFOnAdQEFZNnPXQuFm5PMdRB9BpQA9ZiaZJjN/JFyJO2zVmCNEq1/UsWWw\nWBkXpbbeRuoPYYIqA7Dn57tjC7AgmUM9jS18zvPbsF0DG8kmzmowpq1vEimY\nsRNXN1Q27IgzozQ6oCGSA8uiheGPuQqR5bbH2sq4KWqewNWWFpiqUwHbfU++\nf+or5w3b0M0ZbyjYFLVhy84f3hX/YFEmAjSfjem80wuSBnodrk61L6BOunKL\n5KaCCOf1BvxLbXsmUZM7YSV3Sy3Gq65fmnoobH2X8NUggI6R6WpdGgP+Zb9I\nBVGaVG3CkNo7lwmwF7IvEO9kd2FX7Vf2Js+1rhWQt6KvK8xP02QOc9EzK15s\nZTE9Aw6zIqvxvSO4ukkHcuCYCNquXOWHWrn/paA4SHP/31I98UP5U1dDVnpI\nv2xG\r\n=r1X2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+xePZVxWe1dZbhyaKPVmMv0ezfHSDAd+erv1ADmb+OAiEA28l1ekl2karGUPpuXT2tSNUK7ysTRJfwFBvAnE7f0Q0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.b62f901d.0_1624659392996_0.21053558763164282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.73122cba.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sx2cZOt4scrmGKMcJv/C0YlpAylbfg7UKEHOtm6VrsmDRDgf0elJlZI6QR7V0JrAQT62RjfLO/hZ8xSDsmd7qg==","shasum":"cded67d78e3396b78ea45449f0e27383c9b90156","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.73122cba.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MeXCRA9TVsSAnZWagAABgYQAKGc14kgIArLuJKzuK2w\nqeJgxfmuQeR1S5R11RMfWjdUyPe6g8Y6ofP/sU+rSzljyfU5/GintqIOL6YV\nj6UenJSttUlgpQh1FeHqvwVNQ7sOq4me6GTCTuJ/YNRePdv/Dt0Trf7ccwDz\n06drPR8L8Ek2NSyvxVwtkOd78xA02ZfSkfmNgUBvSPIGGTjU9VciCE9sJmfi\nKPuS92IrGeb/ZGxcS1lvnmNPv3K6lVqYUi4w7rxdGXxgsjsDIHNiCT2voKWj\nMTLzb0V5ezc6M7kAV1NevqraraGEdf7p7UZvqfCdmMF121uSH5KLEO+K9f/Q\nW3grzdMlVqAffwNE70e4iu76hdCeADIKl+ZZDyqg+fXZNGfDK9PezW40/+J1\nWAk7g5GZgI9TEMMGvUu73MSjwElRCJ8gK7i3NWp379p2K4tamKehpyA2CP17\nTKd3PlGlvCDa3OQk4fS8Ov4sbF/0DKR/F4TgkPdiSdoHIUedbqw/C2E7TQKt\nQ18UUkkma+FnqYO5mBFWEcJFeC3GD6O6E3kWO5W+u0MUFheprtTOMB1e4SDh\nVOmtshlbjFnMnPwHvl2wsrnaarMVLVSAIG+FC/2JTa6fdQx/gOYFCulld1cx\n43/njr+7s9n6ATKwpt35TAphI+Xp2bSaVyFtRtrek7Gg03c/L0PPIqwPzIMu\nSvKA\r\n=/W/Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuMK0ICe5e9XRyTNSlV8/hlB9n+KqOgoBwB/AUpkqLeAiAu+Soe7Vwe5GvNZT/o5OZW5jQihzTLx1vOezI/9+iIoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.73122cba.0_1625081750898_0.30572439284431985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.a6912af5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ftcCqknz08mP6GLTO4RtB9j9qXak7lGHlmHDyYUSF9/de690jBgBm49FXAiuN14+pyLXd9CQhznQ7P3QCrt6pQ==","shasum":"ba82a08fae2b5cebe94e6c4a688a43539293a15f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.a6912af5.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jSfCRA9TVsSAnZWagAAwvkQAKIsa/e79fy8b3IszN7W\nrgTEA7bMWJ4gMpXJqv7em2JUQySwfXOJON/QwKFFCVrME90FliKOZAVf+5+l\nZmiSwqNn3Ai59YfEe6vdq11OkhZXH7x+5hJeC1a3X4PPXTMgcDi7kiXIw88T\nSXZPx7UnPiJIftRVTvl9zfFXYHdevwaS5gjlCz8ItHzPCCmqOkpdW22qk8ZA\nrDcTxYEbrDvIYif0brsAt2aVQePnAdwVlgty8njhPHY6rUWd6FMXboBRmtqj\nHqIWVzSqV4IQaBk9tzX94dguy2NyJ0eXe9YOOmrqbpolWB5BlS3dk+2vvSRc\noKHZddRMLFkrrBv7bWUyUNI1u3UyW+FxUQth25Nae+d2GQzUmwsQfsRD9HRu\nEa/mBxqG+bE17tL797atBdXghkuBRcIy+ojXwyLk8ox1ePXjX/ntEQa3UEPJ\nTs4vJfseN8rSseH7vt1Q1m7guQiXE1fTEI9pgzw6jEhuCOcxXjWgo+BZUrIM\najbLanQEjYPjcfoqGbl6qk2OsRq3+OZWvt97wQr7WH10oiRHPhMe/iQnyF8z\n2CCTkbgI8y93IcVJk+/mRnPeqSjo3UHQf4p9L8aRq99jap8kNTUqt7GkdmYQ\n+6N15pqtwCV821yDk8zA9JkLDWkPfHrLMIpq0wwLj+bpWqMRWm1BG/Miykqs\nHIjd\r\n=H1cu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyjjloE+qL9WxuUV4sSem2g+E6fHtr1ySMAjsFLdk1TAiEA68tvnUGj7zxyX8Dqa3+To0rlXUl1An7QoNe48k8hTuo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.a6912af5.0_1625175198679_0.10119354417908655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.134f24bf.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fnBgLYzgdvb39b8YikuMXeIyvOriYZ2Yu46lJqcdUTe+xipYuqhGaj/DS4Biesm70tfMddVtFskZsPmZJctHDw==","shasum":"8aea8004a511ff83d3e137d72b92bdcfcf584545","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.134f24bf.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kI+CRA9TVsSAnZWagAAyKMP+wc/xSUJ8+TjFT2zy9U3\n/MzJ66fLNXFR9Ciqb0YpGJh436petDbH5TVAaZTh84xWjn5NMLbCDKfC5yX4\nFSB/94XX5P33NeBIN1qNncNS8l1xZEUG4CGwZDMbMfR8unOVamNOudMu6wMK\nAysOH7SnhsxIxCr4xMkb3VV6kuYvpKCA4TDEPbpnOphI6lp7k3GTTH84GSX2\nR3GpK0Is8q3EUNXdGfYZ0vrAWitiS6gwo6D2a1Xg+RDwUlpMcq2XvKV/lwSU\nTUfT5WUaQai3rGfvca3WI7Jlw4IMGuqqfw8RF/KuImxNASsS+ETrrEnfr61S\nbhfNJRvTrNWN++c2IL8nRj8HdfWK4Ssah7nN0jjNrdVCWdvvExbJ9TxGhWqa\nUytWEFVu+u08aqIkm6Scu3X+lOJ8R3JyjRFN9oSPbNAgvK81MGH1ozHXSkw6\nsfRoRE9ixbVEGTXn4vllj+u7ZpUZe5B57cEB79G7a3fNxG3AkYaKG5S7TDeW\nwX/V3Gc3R6GUdTPKm8hVJvlVA20xlzFfE2omRigMp0/GlPM6seFFgWMBBthZ\ntaIt1YA9SLqD/+gceqM9hSeyGV3srsnWPk0CtSJwi3kV25Wtpks/I8mgNPys\nNxOV+i+qpHWcWLTBWqvxj4pG8ioatqTXljJ2UeSkWfkZUzfjOJ2ZUzTTm+Ab\nGu0D\r\n=R1st\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTH35i1qDpGFmEbB+pTF4YTijcd42hLR+U2tTxD3IhuQIhAPffzBDsKGM9vbXOFh8CUtBGOzgA4iZNcV5SEmOFDp7j"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.134f24bf.0_1625178685681_0.23203879676580286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.1debb78f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ySPDHg5xVuAhOFMXNbrbrZKvRKorn+1qZeu8pzXYoF5ctTQUHBO/q+Ng7V/lVeuzinYAUV1iJwOsYUV2EsDd9g==","shasum":"c8da97d1afb04988dd94e280570a9f63cb08696d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.1debb78f.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PkrCRA9TVsSAnZWagAA0pkP/1yHkM3HGkYvYy1fqimx\n7UPJXpLCIi4AggoZ4Cufz5pZ08kw00fmKWiBBBC5CCtlP3UgylFIb5c6061o\nUoXSuijUye6IkYCgk3nHoGioFxYfknaKXSLYueDA+wiKJgsgK9ltLopbtRkb\n/CbCrZoRHQ+F9CfC+N9zvOxvsm8/+0d1PsFj9CLry8P2f1YywV+JuXcTtXko\nzeUyeTqSfvx8ayhSeZAJSejWHfAZxSve3CLaQYcrBaBcRof34nL3xzgqzMiE\nbN+zTA5hjdnf2E1D6Sjg8bp9dPExYBzMeetRfzto47Vp+bNnRUGJU2aqv9CJ\nKHX8VaP0GjnFD/4FZ+6cmd9JlUchB7/6aU0hPBakw8HpNyboDCZHhrWo8c/a\nLcGB4egk0xHyegMhSOPl0AduW8qAtIn+m2Tp9yWEuGuYjisSh0la9VS62n2b\nbG/EBVlN5eRTgGkkf37FO2shW5GlDn2Dk8svO1VjRHhcpMpbtOIEs18W98bd\nQhkgif4fICByC7ezxgPs0Ri8m3QnuWqIzuUsErbPwTNUTjsopoQqVB+YC5jS\n7Px9z7NS44VhED4K9V8DE0VeCwAj9DDVP83wsD434BvQlg6mHpWKmzcI7K0N\ntHz6Oo5f6QrLSLD1KrkvYwdBvEk1XydXQ6Yy6UglqWaNngw1/2mXg4mOFtc+\nwXM+\r\n=Km8R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRJqcu0uX4r/h7EveGBVjHvZZGR7j0ZVCG5wxKUQsUdQIhAP7iJyVx6CoICEu2t05bQeDsch7xTOw5slAftGe0g+fv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.1debb78f.0_1625618730903_0.02971761666724193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.d53edeb6.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-62oQtMoWVh7LWdkkC957EcmaXRSm4m6/dqi2bSTRbxGk1tQUHUHP8xxrgt5Ei2okyPh5SGLn59LkgRU1MADT9g==","shasum":"945b644f881cbcac9bf4eae2092190be9e2a3111","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.d53edeb6.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d1vCRA9TVsSAnZWagAAqaIP/2oCB2B54/RpslnD1/CK\nCrc5dnXdqQUdiWcXgFTQQw4yy9WIC4VGxz8bVJQAYqKmtBWqLnD7oiIOV0SS\n+Dn5Ond0a4QsjuwyvlPqvLDyUDcf+7eu1NF/lWsQWxGAum//lPtBRFwPlqpf\nQMfcVWGdEEW7owrS0TqSbuF71Sq8Azb4rL3m0lQ9QEAbnGpU+qecU11Kn1PO\nFQ9oxaQcbqHEjSV2lWylz2l+21sJf9xDPgos9Jgx/e6VPBkhtFH0gOdKq3Tv\n2eOPT/KYMtMdB2D8zr6A79I5k2AxJHhRCH/BRvY6kKnlY26Gd1M7wnkn6bwY\ntm4HbdKCoVTy1o+vbfz5ZDDC7OhMPZFjnxL41o0bP68gH5fmNWK53tC6ExEw\n4MTOTQ1Q2cdY/q4TChli8OemSu6HuZh84NrEYQOkqeGIJb24V4BMVJYuuhgW\njuQBxzywenRj/OUyC6MS6G4JmK75f/8f/uH06F09kz4Ygghu5NfB22MIcbQI\nQtOMRnZ7ppeoFaux9J265H+zV5utjMrhw9Rb4EYzRfvOJgxrgQNk2H1YOOf6\nZmpMhdCTOlw0jhHfoHWuk0DubUWVmAjaRNP5+ZOVfAa+wdZNOtSa48CklrcC\nOst9fZj3xwjjBfIT+Zm/KToMcvMz9DNbEQ1GAcX+WPe7+clH35PrF9/k0hIA\n8XOS\r\n=lU2c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlJqySd2tlBQUGodNm3oaif5hQa/7rCzt9ggObq5UbTgIgQ6pU/1Z2ioOMGsLR/Dxjq+L8fHJmRmnH2bOmzt01ASY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.d53edeb6.0_1625677167381_0.08621008774899663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.2226489a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GDVRjVvCyxGkajG7YJnHopk1c78z2XMav72ZY+nsfqzGJOVz3XsWqPfZxnHak03YNGTjB8IbSuffq8CM8NYCdg==","shasum":"79b7be9c28f7aa49b9290ce530e50d20a7236017","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.2226489a.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1PCRA9TVsSAnZWagAAWFwP/2h6wTHHiaJMxCOaschF\nTEZUwTTDmcOvUL6OYLPgZow17RihiYQBaBpYaqymnB9f6Igw7B2xWisF89fQ\nNp2wS+uJXTQRmIiqzYtUxr355i4hWrpM8A2WfdF+8dFUEdKGc0PSdvBk5JOn\ntdOsVe/6AJTvDHGOXp3xg7pSckT4z3ES75rhAW7TO8NMPIiM/r8N5MVXAtU5\nPri0QU6pzZm4Nhe9JrasV0Gzya77VKlwyCkxWskxCvGTGzFWTIqCTIF0k7yQ\n+vothh72znz9JTNX+P54pWgAmjo9m1moIMKqZDTUuLAYg3uUdTOUIEmc4367\nh1BrdwhwqL76/UAdx0YTDEfKwxsFwq5KI9+olSoIcREgshUoP3GVNNq++TeD\n/DcnnuM2hupBNj389cBsRNC7LiqqV8wplU8N8VUrrVPa7o5TMDniDMZJ2rF2\nTrRMwn8wrMtKIH6WG6sL9EzkFzQAA9vaaV3WOa2YbY+b524tiKM0rj7TVcXx\nf8YabGfOlHaIYMCApAKgElKKhn0MdnYxAOa3z4jAcTgy/9rDqp5LF/PspYxn\nIwPBpQYOScw/aOJx33SjmKNA2zmL2HweeybnjCh9riLwd4mi/0tExvLxYkfV\ngCzsqH5PR1gOokR6OSXEGPp82QQd8hHa50qMK5Zhkae9u/UuFZBkfQftGHAx\nMzz3\r\n=n/dP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7J3/VWI76UFNfMws0fCr+5HKe+uPaeBj29EzBBGVDCAiBz/cHQj/4zTCDgbOc3YJh/yX6ofoTx9ZPNaVe5sR6dWg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.2226489a.0_1625767246618_0.15290322398754363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.d4801c11.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZBGAwFf5SraN3JhZ9Z11B70Tr75UbbkkOStmIML+sNPMU2AQDm8pS3ruVgU2aOaufqMvmll+zgPW5f67ScZKRw==","shasum":"c01ab834f89a3108696c760e155266bf6b3db92e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.d4801c11.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51m4CRA9TVsSAnZWagAAr14P/j2WKnIwWBsA0j6afLKa\nURcmF9IRKBhihwy6T7B//oqBFUODGzhxsgmBkoqj2Zp0pSAUcxSjoIpwr3k1\n1Y5lzE/yD3FLnRcz7jzQZSCxj+SyzTRUBJGFQOgW45k2ktqcBDfTkcG9K0TX\nizIp5M/agEVDBNy9BU7xyorPkz3Dtk2OuY/Cdcglgkm00gwbZ//fSu+31Fs/\ndrafRxlJ7CfHvcXczcVZG8oWJYjJ9eahTnG6prf2jS+Vxh+P24Jb1dlun1D5\nzLQxorUsdyyowcJARSjXUoTRMUPIQRNmKskoFfx/t4t0GY0bMJ8QuLKrSkpi\nL0THexgu79woPMkjD1vNiFjR8LbtBNMNty3d2fy/NamUURpbGAXIuDt5D4gA\naKwLXBZtbEtoBVaRelXtctKxLrHzEIbbgBA3/1ioaRTgBRtJnCfnrMfrVx/u\nVx1HogLoAmcn2dIDKQ8A/YqA+8a8o59gBBUf2tX/AHg8Axz0DHxqYBQZlG7M\nuZMfu7Oxt8UhW4YLFQoX0JOIvPpGXb4ojgdqxtVAqqFOsPw8mTcqzg94Fx5Q\nsfQrP4GkzIKB/FkfUSmBZ/o+CpotgdnXs5RIXV8KzBsrrlNaLs9fkhm4YgtC\nYznoHuLwawwOUthcJaSoBEO0bjbrtLeaOtSwuz/MFjIKy4tz0wwWms2g5v52\nW6yS\r\n=WPRO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgXpEO73KWI4HdeNJZp7RfZqmwv4ddzYT3UJnH/H2gLAiBvN4dOSujXCEjdp2ggK2JHqi8WIG2i67EJDS2j3+WyGA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.d4801c11.0_1625774519871_0.45382416459517305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.7ec5f2d6.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aZHPkVgw2Om6xc59wI63mVfLjvQZMgZff4s5nGpupClGRl8n1aEky1i0+e37AaZNIp+3qoL8tASCgcvEZjJMUg==","shasum":"b898de57cfa8f4dc92c919a0526af78797e795dd","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HjTCRA9TVsSAnZWagAAJfcP/2n3aDrucGKZV13Lazg6\nwQ44sABYpKeXLtPft9IVgrStEqqtAvCX9ncdi4chSLhvydtLJ/wOVeub79aD\nCI+0QjF68tjAIiepJ5OhmslPm1bgw2tz/w1I1JYlCG+1sb7UIDp2TXfgCXe4\nzvrnOZLJ33Qnw74APPNA5WJKd4e3Y6Rie+J77CJp54l+02A2xR2LQ/NXipn9\nHReLiPaIfK8C2tWqAJPpVTKjVFYbmInJX21JusNILGEiCgZZYYVwi4mN7Smq\n0mTVY+NJlTNx8ZCIEHObRYK9ECj0gzAWpYu9SxMMQ0Ydgz5dAe0TMettknu7\nSYIVcb7HvPviVdS59fPVQ4E2WVcAsLvkySO4etfDqLtaLgKgdYFVp14UZQXl\njF0v6lQmr9kS618Mx0LrmanCeapXiLAbb7gkLUrcYXNgmq7R3+Ejw4USNqXu\nIr0EBu8ycuwLLshPCH2BgD/OoKdxsBFcThmC2eE6cHfPgkr1DRUk5/fwvhrW\nb13CJ5ojmzb/DtwACX5g24WBKLXs7VPONybWvPOyBkmpVFNyEZ/NHvfNkY+H\nTcR1nkLq6XoUfYwJD267YCq0ub6BsPihjfL8Ib6CHa8K6Qyg+o5SWUze73FF\nQr39Hl17TVpfVQYVpVZmCOFyBKKuCazgDvGrnt39jWEAdBlQ1dTvBP06KD4s\npLcg\r\n=dV3T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8FtSSy3YVBC8FcgpqTYUKofCuXeL5u21pFdCtzfGbEAiBWoi2qqCnzDtlKa3sCavP/Od51YD8vgS0EmlJ2pZ+ulA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.7ec5f2d6.0_1626110162607_0.2378822572084538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.86cb4ca7.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XEIXD6awZUFjTzSX14GR47WXoHawJuafBbC1F75Wr/TVTRVuU5t3VToU+8tsmyhHEsyau/9tiBu6xCnL77aZ1g==","shasum":"ee22a26b7d73c7479b3d9bd39da837261bb0a578","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.86cb4ca7.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c8tCRA9TVsSAnZWagAARroP/2GEsjldwzTeoQkA9XIj\nt0ECG6JXe+sfgdhDaokbadaci5SvKnWduDUucYSOdnv58jLecuvq6YXLA/Ol\nUyABSy1C+bS6QrtWSNfQDpvbjfPghdQ1iFastpJkuOLaBnzS2Fqi6NR6uboc\nGGwJm+4761mFkN+pcdCiIF0zQUYZQ4GtI1PFFd9LLWPtPNjUi45cUf/OtshY\nPv/TXi3K10Dx1VzawKFLW5qtB+anmWpBPcRcWDcTG0jIOoauPDZuusbsmNM5\nDV2v0gm1t/rDBO7ACj9sqrGq5CXx6Sj41OAoghX6lMhq0nr6wYNrRJhBEy1W\n29l8RbTGVztJfTHTPjgqOjj5nSPVU6YsZn7u+AbF4cV8ZhuffSO8dMcpE14U\nzRdCs+4pqjxI2dex6sCmiZj4Kw1Jd4j3JsQAahTv2Tqh+LIiX9anGVDYxCTU\nfJJoqKoERmKBQe95R0Yf2fF1o0fpxJNGlJH6KLG/q5CDy7Ngdqn1fd80eUlZ\n9AUtY6TZzYbQ8mWPFCCKT20hwclIDPQzMtzflokIgussSzwFgO2w0bYCIwNK\nDS55XoCEeKwWVg0ephiqpxFl6zP+o8BlyAmOtfzdJ5Du5unFHOgULrUcV31W\nVYwu43iwUbY6J7NCekp1ZW2Kv1FStnHK4fkKKASvt2Gg+pAWFIDTJUVBhgpk\nJh/Z\r\n=yX5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZFw4nta1/Bkb6/+Fyww2gVv//BaptY6I2fMbkvsk1WAiEAna8IYBYEAvl+029EZtaeCSgtlE7eoKq/MVGji8NDtHY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.86cb4ca7.0_1626197804521_0.6193808201381799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cb42f5bd.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.cb42f5bd.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"2a31bbf40274b11678aacc5de800344a83518f3c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.cb42f5bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WdHyHbO0b9jF+fqPT2gyk3OFkdbp1k4JO8dwgvsZWSRQ93o3GwWS2GDPCh9xigjU+XAjVPGoF276MN37To5PFA==","shasum":"8f64530086aaba3b4c3858afaea5ec30c7dc2450","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.cb42f5bd.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dkZCRA9TVsSAnZWagAA0usP/jYJIiXwnrFmPJCQFBRz\nM9hve03MaorZGHfg+BHMbag96DtZ6R54jAUWqDjr8FWwqdvSptKXpwm+8lZp\nVzyyv34jK379kX9guXmRlp+MGtQ7MkM3BORnX/n1kT+4jZxyno5SZ3HNwz6A\n8h40qJGLo9abJ97ZmcG60s+KX6CJXZ+NGbK5lRfL2W8YSXwT2v8ncxK3BeGw\nv+rLRVTWAu0DvxjhvxYKL9GRQPJKi5gaPlIR+1szDuaQudiDSyrpl+hReaWs\nZww3AY+wOs1zUSlrHJ0Z9TvwoFKbmxPXcTMc5hwIIB1CJToBGO4UdX8ieYxc\ndhl3nsOH7w7mlz9savHoBpfB2FN6Y23l8tjP2/CcDV/UNJj/YTCDf3DE3AUF\nGQg5B2BuOE4AlpAW4/jv0kNK9eaNO7l+2yJ7eHyM0PqrhMc1rWmyUZsw+zVZ\ndn2WK5ksJUkev5B/nGwRGc1RM0KJ5RKVkAhhZu3l1IhGpQUrmH98mZXv3+Vt\nJaJ1fTb6PvpPM5qtFMw+7bCQSelBFPHPdqKBoj08p3ajtN7uSw8mJV/7bzsd\nCGi54e8IVJxEDbZigMmyvkBrQHhXIlgJQCSle5Ve1P/FpdXTbjivBJ7tBNUW\npgzIre4V+p6+gGR/pnHAqVWCDvhRsenGECdYlZ2g7RM+v2wS/rzqscwCwwFA\nS39/\r\n=WwhY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAP+HBlcTGDBZ4SrmUSLrPR5aRv3CuS2q3nhSSy6HZQAAiAbA7Uf3skZ5zmFfMIAV7EsxYNOSjm8WE4Nih+BJncZQQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.cb42f5bd.0_1626200344607_0.03615894353465898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.bc9a724e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wB+o3uIXVxUVo0//cfSG5DS5FQtXknPQFr5z74G5/EmoWuYHUOVHPP98bt0aMnxxrVI6JvKXzGYKAgWt1gVloA==","shasum":"5d3622af9ac7d2f5c89526d4cfdf49d66bca79a8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.bc9a724e.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d5RCRA9TVsSAnZWagAAqPQP/jEg5rKR5PD0k/uV1QaS\nXFNarjNGDP41RmjQdbmdHdqaQTxxQGrJg9vLReZaroGjpC+OcSQgb37V2OtS\nU2oa7LxsGH5IR9z2q9FLn4l0QP0rpvu19x/pkHh1yXN32QXlzn7RClbSCMbG\njxVAWbDOHGJhHfM4txjmzKwXqIQOcR6Si1wBMheWJ5PGN+JzMvmThIDsp5Kp\nALCuxyKgA5roeyskeC0UPmFF0Pr3dePChNlyRdRF3W4V1/Jjed8tci/kgXag\n0U65qO7CVDTicN1c7HCvOobxV/XwE0OhroTpz2p0lIXdk5rdmhGZMBkn+RhX\nYruJ9QkWeu5a6oiyifAO4WoUK4G06bAOKuSK4yq8mTMiZ+MhJEB3Xys6iLS5\nQWoZt6HBtlbE518639ThgnqI4nBVpgjdfNHHiLPp3lIXbbMOGpaUADOHMBNG\nJ359ZCY0PH4fifbfZ7XwN9H47ulsSXaK4IfiNSt/VFvMJIuNwRKvFf4C/MwM\nl+pHhCILjC0AYhsEkZgsHVmgDC1Zm5kmz7XAiMJIzyh2oM8zzwYXXcLUDEsQ\nPr24pdd/kOJEUGMDrWsADBSMJNIKwVlipmHH1kPhjk0mzaIm0nzh0nNk0AkW\n8z9qHNVQLdwpyeuJPtNPqyB939kl2WBV30bP7wc5lsCPAMXjQj88jHnJUJt+\nosd4\r\n=+VF/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaltYaNowjxiEAfUMyUKnoEJFjvlrKSrpb/Fb9HOxEOAiBEsJcYA1dm9vEtMPmjvmMVcQH0uGepo6O1sGMot7T9Cw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.bc9a724e.0_1626201681119_0.5576371096535886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.7847b83a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vGUi7+e/YA2tRuZUa8IYwY+8Wj9OrFljiF9ewLCEbYTC5WqA7jMovJ4lCrZe7Ynj1U+dg7GXdnsuLQFv9JZT7w==","shasum":"c8b02a0e2cff91e94d3d3a552a9a043bcff2e9dd","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.7847b83a.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxACRA9TVsSAnZWagAAlqIP/iP8f7T1XFFIE8mNd69Y\nipSr7mYXisyUas9te64uzuzNE7jfvoC5rydbLJzdVl+03qhgmrsCz5wDWhDo\nCqJ+qK4d+WdO/DFppFY7UGl6yCEApZdzeDaz/aor0ocLEF0zHKYHPLNCYgck\nIxdYLeQKZI74JWR1qIebprpHtOPZyRk0TlE+ZGgnvU6DpUIxO7HnJIMc0IW1\nd5vkZAZ2PNfwbkSZ/aw/Dr6D2eIZXDpZ5DuezFEswZzROSZtpFwnH9dO+YtR\n0/84skVhXTd2JUhh7e+IDpqgtTjKxpsqA2/0wKKpthJFu9/Tg1igwsPSP4W5\npam9hs1HdKxMI4hO0p8lrUN5p+aHFyjVq5oWQbA3k7D9MNouQV8QaCeT8Sqd\nQvHzC6dk59t+FQ8XRtq9gbqHDu9DIcwyocwjZcapgaiRB8e28Aaa2UcUg7us\n8AcyLK4gYbHDHC2RnbPkR4vk++a6zHLok8faqVjo1qTRwTkWVcdEhB58+mCU\nsIXtmdslOcQ0LJ2+Ex5bo1/NU9/odT05qOfLQMyFheNjqiEGMjIpQVxrc5kQ\nQ/OR6bM/umd1JM0/JWDuByaN9lq/0DZlbESU2QsWip6+RLjojeFFik6POm8K\nEXARbi+zEGxR7aO+2Vhjz+fk/Tb1CLzAFsv+XTG9aFQrxJkXKC7rftYqJh1s\nx6sg\r\n=H9OU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClz7QGc7dQccQ2HQEkYfQ+SVlFDQXT0x3jJ46qd9WXMgIgUztsxngQLiH/qea7pBZz/iew7YPwevO7Kj3FWKCLXi4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.7847b83a.0_1626283071502_0.4438056954332581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-elevation-overlay","version":"0.22.0-canary.8cba18fa.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0v6nuFWKQNQV1iwlztb2UuiPybDcxeqcZNLZZzbAn1gPdUG3wPE7tHrOi0Npv5ubw3+Pgry0cVHsK+Usxl2vMA==","shasum":"9a43b5d40d2c10fe540ba2a93a557924bb574031","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.0-canary.8cba18fa.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70hQCRA9TVsSAnZWagAA2vYQAIfvMUNDn1d756KUXl30\nxIXfAMVfC/r7Fh0tSHsX9IdQQVl60ydKXmbPhG0+TGyoESVDsSVBdDiXy0T1\nMyeDriFDCi//depU6YnPak0CzUrKHR+VLozFsPFwQGV/61oYL3xZoOnq/Ibh\nC8qZLSlsT8d4JJmmzwJWCgaVwzp0LSfn7Ayyf5M/p6U+754yCNW76Wt3EbYb\nuu/GCdaOhGRe37mAhMZXhskXAnrNRVsbsXCB9xajS+lTPARCBlyBQauEJqC6\nfoVfkN4EWrkjuZcewU9ftEOnfqMMqDsCI/JXPgTskr85zSYeJGoMNRiPhrZL\ncyzWlTkMKl0bPjL5FbzB7gJeXrOp3D/GU/Nl9dRuMGb93eQGauQ0PjTmU6Cm\niY1DEs8o1kuMswdHo+msAsUUjyAC3HoxFLQcikIkKMlKY7wWIERHUPBQpM+f\nnFiYi3rnIkm2Z1I0zNhY+4dKDy7UCwilcKrh/IVBaNID9PvweuSe2yhhp3YG\nWV+jplGBBTxGytjz1IyHGVXFKhOTI6huFjiiAzaY6PKqlJ8CVn6u+1UO87RG\nTVGgkny5Nije6TmzRIJJc1WE7N6pH3N/Z5NSmzN/gHuR47wwDfIE7EED/snU\nQCEOmVD5bf77xcM2X1YM8Ks4kGyyikjc+6aCi69JR/rNN42TGn8PnATbQ6gV\nOo40\r\n=QUNQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8EA+Md/PN+3Xirkk+R5K84m162zFKUoe2NE+c5d54dAIgY4GxhwiBfukFpRVGsAEWyYvsTuGvfme9PnxSLg7ca/I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.22.0-canary.8cba18fa.0_1626294351763_0.5819486681053418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cacad1c9.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.cacad1c9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c3b883131a54cb0683ad5cec35b6d2f14ddc5a8b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3b883131a54cb0683ad5cec35b6d2f14ddc5a8b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3b883131a54cb0683ad5cec35b6d2f14ddc5a8b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3b883131a54cb0683ad5cec35b6d2f14ddc5a8b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.cacad1c9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1SnZjiXmd3otABMLxy4VblhICuMtiHyDc7FCPYnEczKnXMzB3UhQMkk2sj1jBmdw8buTPJweZ2zACDT4PQLNuQ==","shasum":"4fa5e9f9eaccff7d9bda4b7b2c15c4046cea2b6c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.cacad1c9.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72VmCRA9TVsSAnZWagAAG2UP/39/vxEH3qpwx9ukdefj\nHVhhKtRqHiW/d3AJfBftqJyrzCwZs+179VgEU+upS0Bs+057R0xt9iYdqM0d\n5ilM3zMmcdOb2N01iY2I2kSULhKqzpSHEL+wQXGCgc7pix6hwBEnCn18g1Jh\nxCfzbxupyRlPV90ESIa2x5Y2cOAkgxQk0PRhfT/H8QBcZjLAJn6cEmh1wD1P\nkdrkj8bmlyfnvOQgoVJiy1R67W4gMQXdHa7FtJXDIc7QWjHfPt4XwePxeTd6\nva29T3XnbzVU2tEHg2fu+5eFiHQ9USPhjjrFrIo5YayCEa8x5fcqp7luIIyt\nW2H2EAZJj7zGxEGDi4nXWthc4nra6rmZq+2okcbfb3az3vOKuhQNewVLjnXk\nWe3qYxhbFaykTHf+B7ku+9pQJ3Cz5AhgAJ/CgM/3xlTbgJh+jbpV3+icILpU\nGRe52PAgjdre8Z7SBk8nx4zZ3IGnRBv8VygyknGQnEANH65NM+Xs4/KwRDRI\nYJtERLmoQNFKJ6qtvhEWAEQmoGQ092tdi5Nj5AXbdB4R7me1Kuf62SETnnlx\nrSFfrkkPjbZpRgRyulYsaU8MAUibX53K03Ed5zZ3jYCbAw+fuK8B2+slvJk8\n46m9ULuhF2V3lcL7/+RioyMbQQwMK3ss4QwmeFXDMquKGv6P7NJChH2AyOFa\nyO8/\r\n=C/l9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFh9PIad03iPY0q34m8TiuTsRtKdcCGz4XNdEm9imUrFAiEA+2oeyQlbdAqjo/288Nos8FFUD/KTDNWqzGBCUPtuFcw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.cacad1c9.0_1626301797681_0.8815580021615297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-elevation-overlay","version":"0.22.1","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-msykZ4C51UvGyXMbtg9qfhpdDoEiSxRd5df+3akzoW3EYiYxdo28Q7Yq/1Z5v1z1eu3bLRBnWYErpjHJCwVmhg==","shasum":"42cf4f6a6e1aaeeb940b31a98d8ee46ed68d1c9b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.22.1.tgz","fileCount":16,"unpackedSize":331029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72q3CRA9TVsSAnZWagAAeeUP/1N6miHJqzbAhRTnkvib\n6gztYJuHnv3nRWP6g2lgDtfzo+IkpZw1vWcH1xBBqfu755pSlyvyBTodOvlv\n7eTiv3ug9/+//2A2SqwVz3bYfSto/I3EmCxZAuWfIhAE8pYC9veG0NhKHT+n\nB+6loI7XAPJcl4LCa5qUYQ9CPk2pE6JpQsz7C1H9lhkg6Iv3WORS5AF8bC0J\ns/Az2YNRLaNB1cXJ7RCc1UjkCg1kgUoAaskWDyKQJEiyJQXnOq6XGgHqBdVi\nwovNs6wqFcYufepc4n3l1sJ0nRG+k8Hp/OBW5FnZsmnlPsyvtef0eyE+0dgO\nTtvitrvFntBQON8txXHxE0TBSIy2KdyqCnKk00BEMDMsQt5YanE3e0k12DOE\nY9MUyD+aQeqjCjzn66wNU4qeEY+Wzl1zKUXZ+/ZwaL3McniQkAY5DukHZC4E\nEV/BhRRprTh5XcKQdfUV0DLBFACDc4HKHiD6eWgglBhKuKWFDH7z819boycL\ne2Uoav6r2qUAb4W4/9e6JRVi5itrMXWpgyGKn/uoGAvh3AGN+47rz/+w3X5x\nc+o6BXAfbLRPg7NqE9HThOKZ0nLIysfoNQ3HgfA2n0svVkGkyFO3PFDoelR2\nAE7T0MbUYXfUJHqMAjHMTodklQ7rG36TkBc0qp/iCakndXm4c7pfaPxHgI/G\n0TPs\r\n=zOex\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJb+u8ShzaEoZPKWnjZczINLNG4WViucMs1p5fUk7srAiEAk8BiijnYxOR/6gOQRyvOAO2m5K6DbuFDP6YYF20zxYU="}]},"_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-elevation-overlay_0.22.1_1626303159286_0.5654749123659084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.fbc09b4e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BQHph0ZaUpSSZuxwhoVESQDTE13KCGMcQ4+qxRTqk8AhW9wG4Sjdv+K3eE+l+zrXpQn4+kmoTUrij+ib13VZ8w==","shasum":"f245ebb34d00622855cf3c0a9ee266e726cfa151","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.fbc09b4e.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rgCRA9TVsSAnZWagAADDMP/2kYja/xjAFGv5lnm+Qg\nZXe5vYMStlvKRPYUJoFEn98hRdn1FZUUxuSdhlgknZoPKK2IV9i14oXdQSqS\n9XaBhciq/Ts5qkCCUTQnpTPSDlC1rj8tQjLU8aO3CvwkRVrk2EKkLBy+jHZ6\nAFN+7nyO2NxHPta02CpYV/jRcWtuQAT9MpeET7ONO3Eno/I/DtNJJ3FWShws\nYh32JX+RNs7pUIA2dP6DdGIhiYJJLwR0WaM3hFUUBsYMq2R+LC5MQ7ndXq3d\nodw9KiDHSxTYnvpBUa/qEun72PbuSHNC4nsbwLdDzOhpPwTz/iCTL1x2Sp/N\nvZO0WPOSEB0y3beY1uSbR2WtTcWnXfqJkh6Yaz+UT8wI4TiGIBtvjn74AjQi\nxJCl7WSF+vEiATXF4e11Ag4mW2jKj6ZatuGCGvEnNf3hwtVfgFKMLpY8SkyN\n6aRXC1T1I0QZ6fzCS3lhmHwv3fal9YD2P9LOirC2C50CsXyXQHMpegPSoY37\nkMNV/vjVQXet0CLu/RVxipcw5VVJ2pG16Ir7cOPYzq35ECdCb6jNagooBQEe\nXq0OgLCjJUJqeliz+W0w0gwOFLypuS1ysNBVa32J3xqOQ0r9M2nXvxX8Y5TY\nuVK8zA2k+kU5N+QTvGAmQdyUBQyuzlNKYPs6l7EtmftmKxBLKtxYqlL3I22B\nSk4Y\r\n=QJda\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeZ7DEgptseOMsyQ4JcwoZYyvfLHnTKSf/nURidCuuFAIgGyAbqPsrCACuBm/YGCYv5bQ7tuJ2kK/cE992wA7DsnE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.fbc09b4e.0_1626303199590_0.44060286954484673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.73e9f83c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ObvMSQVH7VNpWCRaHy+r+T08VezoY0Por0zvSeZmwwPiL7ueAa8PQWQwZ0U/gFqR8xZLwy5prUUVQti+R/XS2g==","shasum":"0766d8959d67fdadddb6aec91c840be71a1d373f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.73e9f83c.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8JzZCRA9TVsSAnZWagAA9IwP/0HH+4xpKP3rZ7GACYeG\nBxP6zva63Ow4XdyAq4XwROSWPBh9P3ZzHKFuxOPJeEnVculPcXxI2krQJ3CM\nsatKHLR7Uw/WPu59lsrvJD9PPyQ+IM12LYpXcqWsbN7aPx3hZbx2YsPsQTxW\n+vECJk+eR3DzZ49JBp1OkYUH1FQjV0BAhxY5EhZsMpb1unJMbgQ0L89g6P/0\nIPs5JYWhwLHPTRj/BjEiQlVzKHGoPHcOEsJ4HQoUpwDutFgspTJ5P6h5yAZ9\nqdhmG1kH/Ek6SqLMDmwHfCviG9FvgWFn4HUaUZ9XC7VEzOnRlky76NEGdDOL\nc7BTH9bGcbitxXoVo1WRtv0QuWM1MKhrDojDjte0SIECNRghIsgWJblNZGBW\n0hKJ4+j/fDcNxAe2jneM49vY34hKp3IlutN9VXtUa5MhKdiMi82YLvhfA3J4\nLIcFWl0j8X0ueWlpThCG+7iqjcM09Oqc+CxdXpRKUcdIhKzUbcWVbT45B6cw\nTF7F4DB9NXkFn7QeYC9eB++giSP1JpDpKHk5naNKHLbG6wtTMtrHYuTfTo2z\nWYVsIYGBlR1BcXSBBATUBWnqqFH0VarF3ZCUURHcPI5ZOl2Nirnzg5VTYSHT\nIyfLa4toMAFHpDbxq9EjeKO2CNfetVIlQ9RXR7G0wrBvc7kwTDIWGN2qVyqt\n+xdI\r\n=fstZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC/s9oKeqXdEgadIBrwq7ELjg3Q0yKGJdDThvVoka0ywIgW9h5tI4seOvapJXJ4yd+R/Okon/7KqkaSOdhC5JfmBY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.73e9f83c.0_1626381528948_0.9272069084814272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.cc0aa7a9.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8/nkounmiqkQ5F24i0qY84GyylwV7UaHo1yyKltQiWHLiIAC+08d6TEmpHCDNITbFmWN0pP6X4nXOKGVu+bV7A==","shasum":"29ed77fb97fb569af313298fcea5b108899d78a1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKBCRA9TVsSAnZWagAAyMYP/AqywIT+1MT+0rdN/muD\n5BsQbLW3qbM4VvYUSbaeR7O3GdWHOZ/GMXBeLx3dOfyni2jaJUiie4xRujQg\n/Ewh8U+Jy3bfTogRABhOEjdYfICKXfgBL+FE1PjrGl3mfZ3iOk/KOEJoFupt\neo6nUAM0ZA9wtNgxFdVJvXC8SslkMIp1IrJwmKbbVCA266KwAgOjJF0aStUh\nYp9PXHaxYTiU5pK/oc9cubfoFnqSqTksCOP+NC3LgAKttelqK7S5rMc8B3c2\n1M3ldtK7YePSu2NwpzOj00G4f3K70viaN8jaDLqQk6MzCRIxak0ATOUdsr1u\nlSIH3IgvZRc95pINNyzVNjkhi2hKh7rmkm1d6xPHOxVBxyazNRgmtVYJAQPV\nn9NCPqhEHtpMsWf4JOWbRdrxAfwJcEE7Anng54hByZWsmX+sqPOW05QdRvaq\nvqzjeMUgn6SzRaRnGrF9pRWu8O4AVDjTIsSvOc0cb+vCaEYU7+D2+As+dEaE\nWOEBNenstsHsmGcnUF+TwWllGa6hY/XPVuk8zYQfbrGiNbqyVxIV0h7MIShg\nIuh/6rxjggRv9y1GCAa3cRBW9dMhdHDs7HU6NPqBC2NtlPWJJqKxdeYeYSEe\noEWDgJ8YGjqiue8ItJtuw+EgKrEEwPk4Taq9iUU5VgvezYzRpZ8R9SctlWxi\nMnNJ\r\n=A4P8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC6wzJvWlgD3vLqjyNyF8tuJCSEpyhZ7+pTiygKDDbHwIgWiQaTS0GwVTZRtnkAxpc8bA9jU4hq8OUV+9X3PEzktw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.cc0aa7a9.0_1626382977624_0.6647694157089059"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.a8fcac45.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cmwRvcbZh23Fi1wGB84oZq8/vw940zpTtyoAWxbOa2GuxUeSnxNP7+Uiitvfg+P4m/QJFu/K+AIe1vvcoUPPSw==","shasum":"6abc055dee71a3dca64f6ea4b70d7c30ee05c178","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.a8fcac45.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KbyCRA9TVsSAnZWagAA3xsP/jrlcJ+WAEvQedEGfzCG\nYVromzQIlYvr7noP0NWzMM6+GfnlIWh6NQOO7xJoUQnzGiWENk3HhAkpzPE9\noNmbidNLK/uOK/cxslm283xOcNYJq0Uwz2GbeuA6EwfYGYwxr7bpIKoc5mD8\nml4+8MfsoPTooghccEYeFHGCDP8sRf0Zrl8i/l+A+MAsd30i37HQA4SyXeqS\nnU6JIZYfj35ty+wwE1fyxynDPMb3lmv+O/rm3JivHqf9XAxQguEp9C0H17Ug\nNKFVXE4LbTgLjmo6gr91a60SXAhro7HSiJBio9nlDc8IV+BdTuWkEvSX23ml\nga2NQhFmaXbSm9/R+xXx5bSp8aB1EHXwNXVv40pvr63FM3uVQRjwmdz0k7AC\nvK1ceJ37ztQUzP4FObisQoTHX/AV2G1id8+PYyBqzIg2em+5WoVi0gNgUalj\nS1tgdbtTmiUmIs6zSAISOIkHkiu/XYpUSeMXz7j4V8B91u67jTrsQ0BV2tFG\nd6+KNFiGdmWBdai1TXB9VU2KoWUB/KyXSYqqqekb11ZCgCBZC0VSenFYxOV0\n8JYil0lk8Nk0rjnIhUEhVhGRYt/9HExKxABIPctZBLgDVa/YGTyrhL1tHE8J\nYMJYwE0L9AqaGmJfBpfV6OdqCEziW2FYbawCtg6aIhbMKAydl5ht0DGEO3Su\nR0gb\r\n=WBFn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEumWRIX1UEkfIuz7EVb4C8FZa1KLT5/kEbR+4IBHWWMAiAjVSaIssAqpiO1KcT5hMXzFeHlATSC7hg+Bh4gvXcsOw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.a8fcac45.0_1626384114643_0.22422095423719202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.3ca580d1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q9fwB1Hnj2wLk/oktP/YGQp9O+cPTPlVbdT0fC9dvFkdXFpYF95fz5n+KuUAmVNWscjmTBcahTxV+Uuc9UnYww==","shasum":"224526ac5ed3b8eb543b6f729bcda45aa1dc05c4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.3ca580d1.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LCoCRA9TVsSAnZWagAAX5QP/A8W+F6LwDouF4Dk1t5f\nCU6U9xDuFVaXpOOXJlM7k88DX/YSJnsq46IT4MKb82Kh1B9dX6y1+fJxaH6F\nNrPPoB8TfFS6TuFuzoQthJsdmufBMis3j6+FFIW1DzzCeVAqY3iV7aE2ek26\nqqX7QujOKramXhIFGwT5TXY7YDOSvRoCrPPPGazILBaNAny39mmgbHySwsus\nTlcFrUYGqVwZa6mYJOHwnv0hRVU1rvS2uIJExO3daAikIwePm8EWAF6neQtC\nPezInp9Igsrdo3Km/qMKB8g+zYZELRKi7hDb2aMlTRIjTUzw4xf0ZjEDMKx5\nyYESAVcJLKSevrwAYzJ4GvmMgJvTuDM5nlYu5PN0nLE4tBkOh9OwNnXn3tah\nU/lS8ENEMnOvwKDYwseTf1gIUh7q+XUEr/4jW27WC27Ybnrd4QCEzyV9d01+\nL/ks0+T/Hy8cyVI5OZJJQDpfVnUrH7Bwwmn2faCwWUmsD3m1IpRHSFMYjGFh\nu0ehqcvIlj62Cji85qboUm5idPBDDbSb8OIEP5QQ78MGM6MHxPBzHNc5yTcX\nf+tInNtrqjhYEgrwwpxZ+X1tVr7FpYFoHmMWRCEyaSnKB9rdpi/XdM1n2BNK\n5u6jXkhUJrE0TNM/7xVk1PE19VvOdI7FebsjU3zmWPswcAEBxKX+6KaHN2Lm\nkuK3\r\n=i38e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEU3VESRSgC4JTLgDWmTxkgV08jqWwmgCoCRyoD1/9wrAiA8XF95B3d+IrBpwMUrUmX9lMFvFzf2fVgqo7SauRqsSw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.3ca580d1.0_1626386600193_0.8351642594821223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.9e41cb2e.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LKx9XwfI7gtA3+EBRhw3vUOnVc88uGjfms5U+ziGbSRPySVA0TAwMxlekyuUrLEYxR3Vs4h1YULuYbHfPNMuwg==","shasum":"90be0fa7b6443415815820dd767549fbef55f185","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.9e41cb2e.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/RCRA9TVsSAnZWagAAZAwP/3IuLuqsyIEYbqZcWE5L\nu5WLlSRa2bxjRj9M9aBVGhVI7ZIWcXR2j5nxdMABuqkJNQbHLJo2wh9n6awe\njQBry6J1UuDBjoMwlWXDBtAfrFQ6QcLIt3SbrxMo+cKcx1Fwv6PcY3Nid71r\nHbAYgjqvooabEiECBbTWbwUZ1hPM3HpCr5kFXwM2tulUg+XugIBXzxL+a8o/\nrGpYc9TUacdrmqJJ8wZK8jbyE1p11Z/GG3CLuHwLNPOZcMFUBzszZ+8g9h8G\nQtIiqG4dc4dAZgIEF90qhOfq9+GGk7Qnl61W/H24kBWdbzZGkMk7/jMF3013\nbuoVjac52PjIZe2/ZR82kmpWX5lRAsGm1uelNCK3lJzvMgzFm0ubZkgd3ES0\nP7KXjLt5C6Lv3oYSn+1LF5epu5wFV5Dnm7aCZMiiI4JlpboZVha11hGtjKUC\nJTJd94bZwSWOh3bteGBl3B7U7urjxWDvdLKOKzwmOxZL0YtEdDJir2VjecTG\nZcUlqkcW8nbWK42vFnGg+Y24JjXQolbTL/RsrxbTLGgsRK8PbEyMsiMni40Q\nnUbtpr280esnZZRhovVeDlMeTqQrLO6+OvCpPHemIh9beHjtS//DjUQt+JkD\nRQDH0nLQNKy3jstoljyLiqTNEWG5Ta+YEtEYeyDMEbG1SnJpc2ep6bO4uwSD\n0N6r\r\n=olwv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+j1APD0KyjAq7unpiD5YkPT/u+oFR2sDkb9iJNbaLsAiBGXSgE11+oV9Qz0hxNGUP2PGONne0Rd5SMJN0KtRNuVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.9e41cb2e.0_1626390481299_0.37953767989140585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.c180db74.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iFyNGPQhPVeV5ltpl8lekoomHWV7lCOtPIxg5OUaKVWwyUg8rL3YG3HQrp8XxjmQ8IpL7egBihItZg7VtkjS7g==","shasum":"536190fa14371bb241942c20e002339b666efb8f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.c180db74.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDFCRA9TVsSAnZWagAAKzYP/jk//PQkVXqAzAsMKVwL\nQ43XUtId4Z8t5BrL5OWaUY8eAdAjN+uEpHqSlvomVVoMDwDIMRyEb4smE3xV\n13jlHwhugIU/ljXDNG+gRE3n3sQRsCV5GiA6DP5d/tgIkDzVdvR1hUfl72F+\nLWywdxgwOxygQk5bomyQEbUMF1n+jEKIX5YRtjNUA5zQYj1Pq1VwvxIwjC21\n0aVxeC2pMbXtaeSGRzfyxQYP5sp508XBw+k+68BvxUnt4r/TXlERqQfllJJo\nMD+L5pcfckiUNm/TMHoTVpQuPfhsE4tiPm6aZtlLxV3CicAzuItWeftf0Gr7\nyKoBuRtF/jLLbj7OdOYJQWeykVxlasAcVLL46k2RbbUMzMTz45XxvfI+UX9a\nwR1kY+FN4QX2+2UemV0Ymp/RD9IcS7v9hWtUYZtMejBoxpKyuh7IyWtC/EjW\n9SJ2RrcSZsTwezgR3RgesJQtY9TJ388q4peFcGnN0MppstIdXzSTmUZ/tsPS\nIxQTgiSoz4hz3zwpN2zxPZW0T5qB046T9yKADHp1hL2nMWg4tZL0mYZsAZGf\nH3Iu4683imYKtFRGCUm2lD/hYd3FPFt14a39K4D5PrbeNm1FfjCBrkDyaXgd\nmUNN18i/N/1r39XmkVWqa+hMtnxQxYrEfC1bWYCBnJi8iVtLNTHfcO+bVh/N\n0WDD\r\n=2Hlf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQwY0FnVkVTXVREf3qPZYWgIuZZhJZp1ozzi57SlIH6AiAvLHNNuTzHlcTxpmKDo0EdrO/wZU2KZ8sXPYFFJwf7mQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.c180db74.0_1626456261080_0.9045437699051637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.0d0a9267.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K9OBFjmVRP8BH9vUoUU508LtztJIxrX3LWG//dk9UMe992jYib8JiSLLV8kd6Rag4aPNktpPnqTd47xp53Ix9g==","shasum":"0f7684e1219f32dad91011098c6ca0f5c24b68ba","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.0d0a9267.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8chRCRA9TVsSAnZWagAABFIP/jL0b3UW1X7fhx5T8ILw\n89PV2lno1VQ0/9Wog9pPJcOzRUIBK16O7atW7wK+8aekvKYeu0ZV0go9BDJH\n14aixPLuly7PGljqrwug3fx+JgrhUVLcejhs3wCNzp08lk3Qgqr9CNRAk2LO\nitT+yCjfOUgEiwtGDDVm+tMjXQ7uZl0LRoKQZQXb0qLk4x56HQSOXzzu0bSl\nh04VQ90vHKUM1YCs6ixNuQ9gSRyTXpbRhkbzK6Em5A/CXwrZYG1zrQORgkzH\nqMzu0WLN2tfXyNHH8yD9j1rIzNc30IN4hGxKz2GEXs9kQKYpVrl+e79OuKQz\nxN/tRgoTXP4oVSWxj2x8mtmnGcQQJ7Cu3rrfA7Oz+VwRc6FjEzayHqnH3AM+\nRTa2JHyNax81Q6nnAl58We0t1MIHLoWaSvjBHFxdTV6rpSDJsg6QYcPMqTLg\nf2mTDDPHok7XkKxEa6XHBAaCgYaB6wwKWUKNLrMPCLtMPxKaQjZkEISLPqf2\nlwUGtS8waJNqoixY/vU7/SCDfHvengkn1UcZXf3yhfO2IAsNKfHQKtHTU6FV\n6e4sWd20qobt1F8sO77GRl2qhWdWggGKqVUWMMx8bkRq8To4HVuV0N2UjPVV\n3lve5LEXEsgiGey16sexPv7Ez5yJWU4bzdLBEwWHpzJngmGm41885KhTepnX\nanyI\r\n=AkpA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaa7WwZQJ3EFyai3rDmDW+tWapJwbKyVsoe5wbDOrjgAiBEz+DjnNkKw2ZZC1XyDLzrobuQdP/nS5QTcJsb6oerWA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.0d0a9267.0_1626458193738_0.2290312820027467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.d234ec3f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N7yqPHxrVbT/YWovFgXZHfk1GiKOTgodnmkzR1/UR7f5SPzBr1RAa+WQRSujmfZGVGfw/IGWvC1tNzpkTWiOsA==","shasum":"b1b28b2c512cfe5f2d07f074cc5142be80740530","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.d234ec3f.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8crOCRA9TVsSAnZWagAAQ3AP/0V9dVgHUdGgg9S2bKwY\nU46DSJhTeegmPcXPtYp4JuctQB5iE1jVueGXTNhlQkJnvwIMK6UXHxHDRsOP\nKRp+GcnWqMuiIVRQBcMAJTMaXh1/es8elpZTTFZSFq+WowI4vNFat/+CDQ4C\nwETZlt3CCCuK2hKOyUf9vDXJ1uyhDiume6tzzdkhhHciBylIzCVkcQdvwiV1\nI7l4W/Ir4ztNfrxrPKWBPzRpAtMeZX6xbo3rmg54e69EXfhLXHF1GbhfX7U9\noFi0pz0/Qzp5JC588JBoVPJZspgSrWl0WpeBGF6fxsJ2INOy44TzbvdlOo8h\nklspeJ6L8mYjs4kMtgkdXCY5pGGkzATnY69KTgrjRbUfkCqUtY3XBdbTHYs9\nirGaHSPA84wGPPvYwDy5C5DE1voG5567x1aw59+6KlFfrGR2oa8URbkXLKqP\nTJZaG9bdbnoTuLzG1h/hEaNkMZROf4hphXs2DLoQdRepPYuyZ85/LAQPlFRA\n6BMoSjh3O8wCgfJY3hHLxb6CnDBm65UdcalRx5rm1s5YOydD+1aGWVucm1Cm\n8vrbugqZFrco267QHK78RgOAoQMo9k4/+Y2qIqlic5FLV3S0bcUpvGP0FX1A\nog0vCHQksUPVDIujd35YeJ8CiPJXtV5qjYpiZ9o5P2I5a1oQf25SXFJAYZQW\n+0dn\r\n=7q5Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDospsbDtA8iSXyH7gkYgFyQavQpVvKlZhY065GEie+fwIgDBVKHDCMlPxEbd6RhJqvGq9Qm6w3P1/6xWquqQZHH0I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.d234ec3f.0_1626458830399_0.2886849190773739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.5cd4bcdb.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iiPDN7t5jgwW+IUHTaT/9fFz6NmwMuSRp8eCI7aakOe5GOzRNR6N1R5QFurHxHNu4hBQfjSSRlQ7XuiuUGWa/g==","shasum":"3ad6df61ec53326b91a6445538e93c6743fa7f9b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fX6CRA9TVsSAnZWagAAhTEP/3BkGhGG9YUrRvxXh/by\ntNN0o867kvDnlkbykK9Qm/4tmIQ8qLYwmIxvWzq8k2x9Jp55lXB3CQDQEezO\nqSVoY2eDh6SsAuJgCFsu5F8FpmwMr5tX2xa/aBtcsN/pRKoGQsPzW56/Jm3E\nlOy56G0uOstFZZCutA6xjlZOVqvbJvlZq3o3Lk41wvVHHgoqoTu4C5zkw9IH\nxnb4N3EuH6W/vqr619o7TUV45+tt0DHcRKyfqZWhsBGpDnHmj4/3PLpontwm\nmWvhB5XDyDSrC1YQWHE8kPnuAkiuP3k+lW2IeLiOgspewIm5x4969lb06MBF\n5X4qVIWP+nLj7n14/e2+duUONNx/UKB+KhhV+4/R5oMBQGGoSKTTe/szNWov\nw9RzhnNISRKTBe6t/QwwAeW7TlmGUmOi5lQFha32fpeTnmk5A+rO7Hir0P+1\nTQxUooCbPAQ/nCRt8j3CLCDFhrchN7Gsp8zrcFEJm8fI7mFSQBD/TNbel/Se\nsm3EFZIymL6G+ZOwD9wXJQ5YERONP/T/4CEgo0uPJONS5hsk2qa6tMerQGwX\naOR09UkX3uHuQwuuYiM/Y8hUIVRosT/iTK8a2Opk/6D/3gPqoBvdIUiA+mE2\nmbhsVHlEhIKHpXUiTNUxXQ12B/JvwBiZAinVfbwJdSwtiCazAqXBoSDI50M3\n3lZA\r\n=nK0a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKJrU1z5lypoCSRk45yHaVQg16cCKKRCz+eRwM5JAe6AiAvpHCm+MC3YCBdQOVrRgE5sP5gFZfH0hwWBmnM1Ppfdg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.5cd4bcdb.0_1626469882788_0.07648444604996074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.2b133cb2.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IgcnQXGc+zW2Sdnt3yQdHHcjwRcUyG5g+L2aEugZMAwOGsLeSEO4olXX6HXKEXUrSzrijqyUkQjC6JO548dF+A==","shasum":"d41ad3643209ae6d1bc6cd6dfe5dea0123d661ad","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.2b133cb2.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gK/CRA9TVsSAnZWagAAeKkP/0F3K52t9p45EMqKFmKJ\nqeQVMW4kjoVaqRFCwvr9rDwsciC7XyvBA25fB1t48F7FYoX1PNbBbplK65oK\nFsJbY1+dIX5XWQCX2wnCTbxbXoAejef9zrQ7oOSmn5sAPm2gVYKHZwDxDPhv\nwRkzCTygSrtLMXIIOkmW4/f2BTwFQgRFvF9ZcTgnQvQNS590c8wM+B0AY9Rv\nlfT88NZGZ1QCtVh5cuLJ4yZGiKnjHDRGG6xhv99YZjA8XLZ+X+ky24D6c0Oa\n+0PEeeuUJsJfKeZpJszYM+xYBIdcGYFHVaignr9AazhavBCg/x4bmvbzIIpa\n4GDgUazziw9DKvGTkWhMn/tyl8WpkGvE4MhYVzCH/XKovv3gJXaV57v1EnpS\nGr+vQMG+pRf0h1sk9QO1bwipRqRHFrSNPE7FjOdmgXzTuDNMdEaMg8O8SA0V\nv/JX2H0EqLsvS6jSHodPv1bcG4C8Vtv/U2hd7TA3t3VyPLjFIgDs/8zE/3Al\nEgCW6mLEtaCEsQaC8T5+Gh/VB37iSs7Bucbn3oMLYvekDZ+L/+3gLWNQqeXq\noeycl8+Co5dGM3Fxz/lcbge0NeekR0J5RhIJEQSP0r+0MlfJalr5yGz/9M7d\nYgOJgn50vz0vDVgUzDHUXV45oB6fd25mNzkc69GodtMCkM7RlUyKg3k6/Ao+\nZNX7\r\n=gadn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBImOLg+Da12K5PjuptK/pliHRP3YgG51883vBCbYV0AiEA1L37zoX/NpkqEJeUCN2J/TZvLVsCspN9eHjApDH5E4w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.2b133cb2.0_1626473151779_0.0005592530740476942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.ae4f422b.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-V+e4AT8vY6Zy1FsO2dCMhAdqzGbUlr0uGCjPh5BGyK4vGwq6mFDVM/JvlZQFF7VPrGLxsfJPCEXKOtKS6eNnBg==","shasum":"6958d1247869beae509aa7f6510869a285acfe59","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.ae4f422b.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hvxCRA9TVsSAnZWagAAHekP/RJF/Gg00pQ1zFaJjP+U\nBEq2bSBl3ogCD+mv9qZfTEd3rKi9UALU7hqxvD9rw5CzEzh642hCIslosI3Y\nLfu2mNOU7rcAUlV37hmRkFHhtTwoyiuKfkTNEy2RsOQcYUrgi/7uGJN4co5j\nrHTxtRFCw8bRhvbJLR3gEa/3eBao5AeLCnsj1bsudOenqMI4KZc6olmq6ecI\n0oGd/fLXBwdfJzbv59inNWcmtVLi3nh8hmEzKyWoV05gp3ltQoijX0p9awLf\nFilVkB21WYYoTxAEQ4lV3o5Ch1NDlOiJ5mIXxjHNgfb8xKaTbzj11qWbJfvT\nyM6sFcLi1xM0XUlHvbQP+hxJN611s0rbHBS6O+0aWb173Lh7RNBVD0Megvcb\n1HcIxyZjPbkg6W/fI5JygjYvjUbml2zsn+Zc4mVSSw8ZrbKJUw8IPzhaj85D\n+OTk4lhE18osBi2sc7LwLmeViL5Wsq8FzxoqC3EA7NzI7dwBExNDGd4RIWuI\n4P2F8XxwK7DSlhM3eGWnSrowVWQWK13cPnN7pBDV4+Do9Wjr97yKoXi8Ij78\nRt3XR+RZ2hSX/YdS0+RcSAXBbnUNowtZQH54MLJfk9z9jxdm1srFhBSKqlJP\nNI99HN6PKe3JLlEumjPGCzR5EETAXMUheUQEa3U/JLfeLE2+MdbJE353EaVT\nWE/a\r\n=d949\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhpLOT1JSnYHiVx5PTxfSCzG8HwxU5ntwsB4XogIy/wAiAKrfUCGXJ2fm5isVLTtdVDrLhuVOzT3BqWmUy0xJWcWg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.ae4f422b.0_1626479601129_0.5529273359812688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.90ff8057.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SesbLvmhfXRNWh2lNEaLkfCsnz/yvXLcHdo3SYfI/h50VEbmkc0snaQFFjDeuLZVj3OyX4zxcpFtCTIVuWLQxg==","shasum":"2452f44b511904b3a95b422eabd01dd2d3806991","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.90ff8057.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9Yb0CRA9TVsSAnZWagAAQi8QAJO1z6JJJVGNpUK15qpr\nx+cTi1/buqKlJlVupIeHXab62gOpnFmnDEVDZnTo0oW1V1zpbd/eXbVP4j2F\nL+D1Egq3ykr0883IXtso8RVeEChqcoHjHdImMqnyDBnQs0F+sO+2m5DZvr/a\nysOfTwAstnPoscGQLU7kh9EpJID6Ar2/z6GK0W1zyVQHl86JjNaDB3y6Uu+O\nslXscRG/RYOb05T8TvCZixhmWhFSC9JK1z+9PfJ+YpsGhVuH1aslT1+0SGad\nRHOzOH0lDOb4Y+MGGlRCOzqEdrWEAaRdvrju8R+VETP7njNOuSh+vIu6PrQA\n6EaeqUBS4CItyvg6yGD5gEcYsDSF9f0SeUkWcifNoDYTgSYFhIv8JayIePo0\nq25GIpsmMM3pMckePthda+OVSOhWUJsNpmKdN+Y4GPpIqRzm2zyZHvoeCan/\nG6oLSNXwsAICwRNqGODJElT1twxWtp86msKL1a9ODIYz0yAnLbpWCj+fUaad\nxSyz9zCpsaMcIdxG6Asrc49ApYCKuk1CASAyJzE2msXyFVIThP3B1BWfTZ6v\n/6b2/ZHQYE9sNjJjRMMzuH7JQmW6CC6gNptWyJ+/FMxpcEH44I3y5BWFKzX4\nRitzjPYg/OgK5wLn+r7URCPJPxvKa5u3q/NlTEcpA5lQ6M0t8FnL6D/AlwYe\n6rwb\r\n=PUcT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyCca9I83xycDQETkyuwrAe+3K+WWYavbaYKhA93uBMAiAvbSxQZjIwQTYKq+n+gNhkKPA7NkkMYxhUjYTuXfQSgg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.90ff8057.0_1626703603842_0.43166022244119295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.dd7b75d1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+ooTC3hbTae+ycvndNlgaI8c+XCMb6UhLpBzHGmEToNuQxxPNwRX8svv9Lx7gd2Xg9WE+Eg0tJcGIzC2h0RXdQ==","shasum":"1e6f7ba5484ca3fb6e0b7e86c7cbf187dba34704","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.dd7b75d1.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bs8CRA9TVsSAnZWagAAfOUP+wT0gjpSH9PxXg24LPbi\nhvETWPwBvcebHKH/eOlbw6paEYFi/iKN2D4HSqmItE9tY4fKPN4pZmof0h0p\nXDyl+Q8fqUghP953Rfhf6D4edguNQw1pLt14NAHJdOIU5zKYWAFnbwwFU36W\n5qIuBLm6ayS3+RPRyAfNGz8geORa7eqKOP96v9TAhW9BKSQw8EiG5idEfPca\nJ3gNVUEVPs0Kx79RaMKTLZELnVGpXjwBWVi5rr17iB1Wjj7w4VccIYY1MRQ3\ntZGpbGeJbRR4svgCIt+Ix+ap1fQihjNUoIZ0Wd5/reIWor6EVN5Jbg6YVKs8\nH/Ev+Dfq3kDIJRZgA/kLHcCSCF8Lb9ECMCC7Jfbq+xp2sVTFD8A97+Id6xvK\nBcNKtnundIpg3oFEwN1S39ur5qgf+5KJmGmY3bBHqr4eSGVUiOTbv0rFB5Vn\noekQdosGrtqiBx+uQcCvz+nXdmllaCw2w6e6M/yUgs8jS0HrMbMykqIQYwd1\n/Hs1YLuwDaTN7KGwziHahI75QWotjtw8nccuSG3AOsjqUxB6yH27nj0mcPTG\nSPMaEYmeLdjCM3nOiyRbp/06reQq2/lWT411Cjyg2ZvoRJ/XAh79V9SWqPxF\nSsqWOuqRVbyG02oije4uT+HZZDCC39wsBIG1hO6sGf4c4wH2pZ4ceKlX9q2B\nnms7\r\n=O7JG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqJiDfLoIv1rLDJFZ2A4WeB0H3KVZFY+zm6KzZ82sG3gIgR8/u+teVqoQE5q5lj3ZWRopDwoHXiHHJGi67hrK4klM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.dd7b75d1.0_1626716988452_0.6881601541984188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.104debd5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GDXQ5dJPyJLQ3dlCSXcfnalxU6XVGJ5/kFLh3wdSTclS8Hk4dn3MDU38918YNbaAgvg73CdtHt6M/grC1AZ3Cg==","shasum":"7c709309eea7215fe7e5ece49f7e045430ad93e6","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.104debd5.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJECRA9TVsSAnZWagAAm3kP/0wK6HTVVYY3L+5bXVE+\npcNlQVtSbFTv9N9U1HNOt1EwHy+9m5AQIoCql8IXHx4Lwm5iDDh7ZUmNnZDp\nVVGDDOgTmTdp+2b/RqrvpZce9a7Te8zN+c/tZbRgAnp4B0I0FAKDGDg2B6+h\nRsUK0tOmd0fT6DXVrP99MQ8awwXQaxIawu3e3q8H/weExGOtgwDERmuvPY0T\nY318jtCSwWBLzcDLnm6Roj0HGFTfXpRFrRmU4aMSjM86xMHiYG+bc5SLGgE/\n3TiARIHDdQGDbusp4R3dIbC4lmMm3hConQUBmkKsoNca/uBdhNTxXe3WdEPB\ngOQB8jSIUHA5hTFzQhS4CSfAnY5Y2LIjnkr8obkzt3hn9C/99qVL2n7A2tPm\ncEqaEdVi6BfCYr7PK0NAfPclzANXoAsvvM5kZjKXd6VJvgCz9fqRyWAXgvrj\nPPZA/lE7nOfZL231WKol2g/HXHHrdJ9QcTEaYPTnLVkW410fJeMRDVfOoPOu\nGnZEcy6I7NdR7Xvc3eTRwHRnz4Wqsd0GhJnx+RdcYyJhDXMD+KwjdnBMeC3V\nA2aipsCf2Cqw4D+5w8BD/AFNz4jhWRxnOhE0ItGy+9esEL6+uh5BeOxdazbs\nNT8PBy2kJw0u+NiM0/81xWvz9TQ9xhtqDT0sqfV9Pz5t520oIsbHopP435or\ntOEg\r\n=pFdP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH38NvCcvyF4OAlTWxB9LZKatMp+mEqRkbWqs37uSWibAiEAp4KMzAwbZMTQskr9QFAcG+ZqEoVzJV1x7ug6BQDnvPk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.104debd5.0_1626735171829_0.1481892640903264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.4612705d.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oDjn4NTvrloW7gWEEKHlOA85T52pq02nM5/nwGBZDdVs9SdtMyEgAr/3m6ByGsnBoleF9nHnv2usEKDHtjIbrA==","shasum":"0913f2c43ddc1ad891f947ffe3663993b578f000","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.4612705d.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vPsCRA9TVsSAnZWagAALXIP/2hC2YGxDgRqYAx4ffWR\nXBV9+ScSqAhMTj7wM+sjDJCNyOhOcjbK1f4+4jEV01rKDWeaJPHrRxFAgbZV\nnw2I6WKr67Px+HTZ3NmdZgHKHYoCNkE0Or6NhSbksheLQ/LFR1ficuwsP/Du\nCQ26vJls8J0LaN3KRmhmbmrW4UFL9JqCkf+2kGGJrJJkNtpM4nvOjJqIiiXz\nMMzLRhvuDjtQcqxJcxwm7ZxjsU0uj+PZXvuRLHJhNNClkwVVrMhj7gwZ3Uf4\nVWTqEMTUzvBRNh9kls6Bl4acj12Q7mduiaXLkJA3hr2zWbYBCOAjhit0Gj+n\n3wNkY4yae+WUQLYZXsmiDxif/klL9PyOz0IG70fSFxMUBP/sFgIEXWM9rqpx\nTi0KT97aA7+6ioLg1IiLO0mQpSFAzuRRAeyISfhETv0f4enMsPZU99QJEVkB\n2UI4sLN9x+SpGFZgIrgZLhBnO4j8h3MmXVU1vSinR/85tsXhDQp+wAKBeYUa\nI58y4e1jH2ZV+ikOdv33SccGQEPIMffcx5+PpJ53IUBTKklBLynzIZvo//6A\nIXG6rgBAl/KQyTnece+94QabP6GkAHO9pCIalUNyQJBGzDO+q/kCBeOvfEgo\ny45Prs6+PQw5nf5AYI8gXNP2Ee6EdqNRYAPN/PpYk2KPBpIn7VKL/RvMF8Lt\n4vs0\r\n=ivB+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQfISmEjRdvlqe8/Poj93hh8656/XT5m+ZfleENvCrNgIhAMeYYVWxxDY6++Y9NAzVPcWOYZmN5xDgW468t0gVQYH8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.4612705d.0_1626797036146_0.6153501638617336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.b36502a2.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l4jMdyoy2+ROaa2EDAO9DRmXXXRTglSnFhyE0m22vPsXnjHKmioGwRz9c1cyzPvHG1CtTkNdeg+y1tq4oRA55A==","shasum":"d94b60f3890e2a50e8cd4897c20bf0e7f9f1d65f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.b36502a2.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KDRCRA9TVsSAnZWagAAY6kQAILDhPK9q6DwD7GzQmd3\ntsj4JabcVZ4iviyYlgKFAEU7dY/nfqM7MR3xP9v/G4KASEEyUQ2VLt32Cf7c\nStsd5oYMAhCS94kG/ZOTt+dnYTYNTNFhX5fbA8MOwC+Qs2ORsD/EoX1b4dJT\ntZktupj2TKli2jE+prCJFpqr/2ca7KYWRxdICJS3tL3dG7v0qkjwgl7vaflS\n3JNSOxWHExXVVwNapXy8aLvSbX41ePILUVm28wuT8T99sfLxXrKzMf6h7ZOp\nbxMcEWEXj2eEAtwTXLvmjotT3myaLK6W4dNOoZwT4Ah46g7t0tsH4B2UvfVv\nynV1PVHWV+DSPwTeYHb8gT/h075ChdAwO7WXxO6kLbGOWBMvUEjLYt4zx2qw\npoDnifNkTi0fNj3RMwzOTWXltCa0yMCHjAfx3XwWDMXaZhUfz8PYOtZ0S7q0\nAtU4RCvn4pYC6HroxtIEFIgvyy7A9oAPb+V6QXGQ04dW4vmSD0lC2I7y1kDd\nCVGtjM+8A7Ov77urYo/sGJQFf3Eaoov11Ka5PH7G+7MV45Fv30Rq4IEcRfDD\n/0Bk/jpWC3ViqCHJ1STYxdcS8yqKcXLdu2aO80FMYe/mfbvKs3HjkpKBGVks\nYrmtEwBL5FzDjhwJ35aEq/RUtXPl+90flwJFGMKw/h+YvKeMwqaLXBbYFXQ6\nW8mk\r\n=O7MO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsGu8J/oIVqRfu3pGHWAGb3TJtehq/O+noouBx+cYJqAiEAkGvddRP57ee7jTEkSsehjsm0DkHF15ZGQ654xE7Gt28="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.b36502a2.0_1626906833224_0.32172970350211205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.2c392ab3.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GMA+Q/NWyXC+kR73hhjBYJQIkvWNrmBQdwCB3HS1YmAJr9UUVDVwJQZj57jfod/7bwMecca3hftwkAtYKTd4qQ==","shasum":"9e7f2c7f2b132eaf1a43961410d80b6316cff5f9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.2c392ab3.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YYeCRA9TVsSAnZWagAA89YP/jEuCG0IMjRkTJws697h\n72CT/eWNG93n3JgqeVb495WDvWbTMyWg4FEUm1Jd25K+FXS/M+KmU7D9nXoB\npOZMyfQIRLjpX9fpoh9K9irYG4NWDWVSFB2EMmVQhliT5v+ihyhvTkUpez/u\nhJO4XRR24xgp0n7UvE2VCT393toBhAjH9MUkmki9V3NTXjRDyWdX5Y+ZAWTJ\nHLwfcELJRu2ZVxJTyxVSYNHedBHySy6fxFEuqf8TJkQVeQGvLDMGyPNFxZ//\nuswUllwTqHVh4bZLWuihC7OTZRuAtFFJZxWRbyVS+HZj4eQ+ok+AVv8F7B9h\n6BdU/9IG+Ljiad1ilucf+ZpI2Eg8k63ToZuEJytamtYR7nw7NI7KmpNO48Hl\n+Rzv2b40+0aJTj5fSIqyOgq6BlgeNqDM/hJLmXHuMRZXyi3SdFYl+6Glh/Zl\n8rkvV10iXF2SIifwhr4sjgYCKqY7CQYysX9PE35iAxrD6henqX7z/x72yEJp\niGdIClgT9H0ZPp56U+DexXugS2gRtOOfioToVYwcUH+7zT4YCUbv/+m+WH1O\nudVBmydZe2NX56ixsgrG4rilEOv1v37l8W9kYC8b2tnl6VeWa2VzfyBUHFji\nFFxr89MNREQHqLOZGtQn0s59l3+nmi8Ad5MI+Z4VPDVG+1jC7tf4JoSZgOQ5\n5D1s\r\n=7od5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvZv3Ff8gNzUd8IGGRle03EtkValgLGY/zrMXehhFFhAIhAItR+Wt6QwXEAbnyUUFqSUSfrXEg8P2nqbEJ9/AAduh5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.2c392ab3.0_1626965534598_0.6969111689735055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.e8bac95a.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YR5z2dOR09Ak5fvTnEwoWzZBGO/iEeTOyixnlx4SY8Kajft+6DDya8wABel0kb5m3wiSiSQE/rXMkxUEjgK8ew==","shasum":"09d50c7e869ea975cb81d6da4f18a89b6278e4b7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.e8bac95a.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b5fCRA9TVsSAnZWagAAvL4P/AwLA62lfbe6kbZHASc7\nlwkG8SQpR/cHHbL8IN23CSlZAu58WFc13WXKazeVcGduIciBsRaCJjK10t6L\nLAcoHK/8tGX2Gfnkp0xzD1Sh6tHceOb2QOn8ovZenyum3B4RgWIGqcOFmfbA\ndDgUG/EFRcvhOIHORy9mDipQf9wtcBYnFWo/4bDpkLul9ZejC3JUuGgGUg9I\ncbZ7kcCCeKXqR1bFMkuKcIw/DOxbcGAOvwDaVUcvjufsFvX2bnhdBPY2NDhG\nGIrM3QZpmFzpxmADIbLAlhZD2P/a0OLpYnenazmk/EBdP1N1DMgVi0FOVNzF\nsd74XFMbi5p8EAHaF60cCOxL7y19k7Qa6SiZXGAJtEHQwnYvWRdLegXbJdFT\n2BZyLnGkvGLxDJ/hY2T4JZeXFGLPzjBuRbWF++9DwROJTbFf+c6yNi2c3On2\n2xSuvkHkRYLC+1ocqm+PdOYW6ivQOSy6lgYx5K1pPcmB0cJplY/pOflt7mq1\nAUW3zMkqtk7BUEfFPnULDwY2fnHL7PNgS1L0a04KkQ1RuDjOG1k6CBuamJVV\nV+End24U3CFhFe+6LVItGtY/Hs3Qdt6s1eoX9fMUypVFOR1tzqoH2o9/DvXj\nONK23nrTDF0ECvmKCT19CujtofTuQLWB/RMS2mhG7Ezw5spTzuDtVS8VqBy1\nAZDQ\r\n=WCHr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbBZvw76dy4sOpkFnfcc+OWVKVaFzS1zexB4Zmzk+4kAIhAKjt1iGQQn9FIMRZgiCDo2mvdr5PdhOd5Izzejen9Etn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.e8bac95a.0_1626979935239_0.09235409421357055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.38f29f8f.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l8We4rZ5wR+mGONZkoLlyqAX2kTWrkANBu1lg/s1cgJogFZ9SZPTHP/TjcPSWLWoQ4lgwOYsacsPnyM6Z2kp6g==","shasum":"5bcac33d3a35a523ce5d888b24738a00fcccf49a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.38f29f8f.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wc7CRA9TVsSAnZWagAA64gP/2y2wcBzystc2GNTZhw2\nh5Xk/6MFZdwQc0n6ReetzY58aQL/T5AY7IyhKlSXUyiEsVpVuidMqxg8GY2Z\nTb8Y91tfLMCfp+1APvM1YdlJatvaXxIXBBXCevqAYysocOofZRd5yMns8hH0\nM3M2XVuLy7WiNWijL78MEtMfmqmc41wDxZ5VioT2OsTLrjFtM702E78iRR4A\nDMqwvSsZS+H0ewT5moHOeTFH73l4Uvx5zrc6Y8skl8zluyRRw6Q8KnSF7Dcj\nUnr1pqlWPp/g/GrYDn4jSHQCs0YfzsUETTp4VX89XcDHaaQNDSzkceuNd48m\nv0ZCAeOWfxPrqBtRdIMH2AtMfSKkvq7p/+gfkWndNEoJUJbiwy3VPwHYZwrH\npPTjMtJXJn/Kr/ALYIzcvcpLc3+GEVVsGuZZ0B9fb8u4cK6ilX4waHkBUlFZ\nXte6XjSGnoifoZKQA3yT5FACVrx9f85sK4gA7ZPYThCzWFF4sJfHlQyUhprw\nzNRiAqTjoMqsCHbjiSakZJU8GW+eW72FpO3kczdo97cV3AMb7ldGgvXogwod\nYnLIXxOCqtZDhzA+qZ/2VcBjenhNQ0H0R+N1LRP0nP21GezQfVlGz0TNZRfS\nj/Tg4gDc4eUNLHmhyzrMGyjZi0piFLHM586J4sBhsX8FVW8iXjk+r3oOj7c9\n+b/4\r\n=xdrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMaU0nG4K7VUUZ3xchPEFdp3KJjXEBnkLff1q1sdOUzAIgL++GPMkvZGoEDzp1Ry4rDoHmQsLyPXBcnVF3nyysprc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.38f29f8f.0_1627064123659_0.17538906622363104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.e0693475.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3761XUj13PdGvJhrxWzYxK8oIOsyIhEQNaU5An4RpFzcXz4xQtvv1DJTtzSToMS8gCfe3IO7UmkbCH4MtdE/Tw==","shasum":"7f07459036a791a1ff8056624b67a9da8c0cf501","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.e0693475.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xCjCRA9TVsSAnZWagAASjwQAJ/k3RA91QZoB8hg2Om2\nQGSAQRF4uprPPpkoWbk1NUi5GxVRaOfZ/AtQN1mAEXqoTaTBpEiOd+adz07j\nMXCJy29+d9LWXksfBoa3u24ubAiP3Frgw7KEey6lBfdGAPJIywSmKpWCBpGM\nj3miOVJbPgG2aYEGSGQGJML4NFyMTCg6fYaErrbCnm9057qTrPu6PQowaYYo\nQKt0k4dB7TTnIMMq1i43OJaEnCtKGz+xOSQ5P5KhgCxIIT4EadGD6rPDujum\nKQIkADW9VJJw20BYOUuBcFcwE77Tw294MoATIRjiqTpeZf0cKwliZKoDGXhE\njy8msB0lkpde0umDivlYxcfaPX0Z1yEa7NZB0WrhaRmuPuczMk/h0rRjk3up\neitCUvQxeDxpRfUt0Qt6W3GesE9i7n9KUZ7avrbLWsZz1+WTNgdfmbNaGIg+\nZmGdNaOlF0MnGsa8Hmh0x3CVn0M6VGjxeH+oXrCn2aD+5wW3Ob9043sbuBP3\nFmYRseY2ZPp/LXzUEhmebcruZuEGdFkwvRqazahPINie2ipE3T8nvnaFyYfc\nC52fZnEwxeVRbQuNbFX2mt56we8j6WH+2yLwCBlu5PPbdmfsBbT0dAkVa3x0\nL3kR62+kvQulUrvYqped7del1IKMVPSJlKI/t4MLG2/Zc3IRwwHVi+8u6mO0\nHTV+\r\n=Ho2v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjp8udJUizXf5nMbPl8J2YkQAicyR0CKa573ZN77AO1gIhAJITLHKT+qIpNMbyCbE6H1qH1OOFfFG90DvWUpA7kmW1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.e0693475.0_1627066531050_0.8876262410535762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.d595e030.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MLbk8Y4pktYT2z0hbxFdi/oaeQP3ZtZP2sgtszEF/RRnIq2aVrgBNSKPXY9c3R40A/SDDFUD06Fv2dn1VkeewQ==","shasum":"603427b7cc7cd89c88fdb8ba04976a4db4dc411b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.d595e030.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ywPCRA9TVsSAnZWagAAIxoQAIF4pbvqyR8S1sIWC9fV\nF1t9hHfoTxbRZnaU6E6hqxITxm/POZ5/DIB5MMYS48kN9ecuojddd9ciKG3g\n6pVWrkLXWFw9cbv8l6f2CyHPhs2qY09C8FiY96i58kw5Tc6fTV6nuEAmMUEB\n2B/6EnC741PkSpiTBRE2Ki1WOz7X/4aFoXUnugOgaripiFvc9YYif1Oz3Z9G\n2OmYWhOqn2Nh10JnwvcPFe5H4QzIaBFHmJ0MhPYFAXyB4EiWeOQxzTd1AEm+\n0RdGecbmbpatmgNhajxxAAgGqOeftGmAuHF1pgoIbOcnnwvWgL0bdGyQQu9b\nJwF6h4wUI3D2Fa3K3ahqcQfQUZcW59OeYw+aOY62r4LNba5BMnI9wMr8QnNa\n4ugNUHEv1SGYdvJuLmarDJh9jy4dWBfFtoD2UWdC5On81npx9cLHIX6PCc+/\njkc3XaA7trMGbNb2cVxalEXVz2JTItNTcQgMP6txc3SL9kZGK72+KIZH9Dnt\nCCaZsql1JToCtisUBptUxB1kcft9B+RmUOHpQ6I0cYtkHkwuSJbesQUjzSpT\nSgLDed0KKa/f6f4qc+xlw5T5qp+dzOGNxImk9Pb6HczkI7fsxyt6F2Uo+Ov6\nG/PtBpmUGO3MFyJobrJdLjHA2yUkUk+CRBNn7IfsMEpHGcYZ4mBiMqTdisdn\n7K8Y\r\n=s3ev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC96yoiiNn1B5otLH8hSzZzIHRSFmrih+oqsEu3pDUnwAiEA/qsYg5qZQxDTaYqpjIBG9Zlh9p/DeeBIkIo3gtydhj4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.d595e030.0_1627073551757_0.7410441004532082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.fe7cca31.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eIPvDEeIrRcL2hL+vrd2IF+fxumhtSzIetxZO5IoziuxKduWxOQr7Qst8DMyw/TUEvBwv3sLKIZSkTC9a3suLA==","shasum":"2a5834950ce9f9dd3225c9cd043fe18f4066d01a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.fe7cca31.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zr5CRA9TVsSAnZWagAADn8P/1xIyt1S+fpUUkFLlJ4p\niaB+ujVrCQHpzXyxMWGDZAEnfBFdMtG5qOzE9Ms2y96QOhsDcRutZU5SMUpo\nQR2AupXtA4nHTtPYLM1OmL+3Y1S+uFqUYa+QQyFCF+EEttnh92/E1YF+BItT\nU9KBMuBWoXXmy6TQdEs5bEgOZ0ghj1LyrZvC1F4lY9H4H/jnaJfmnpbfDJdS\nKxVwj/9UKL7iXsl/d5BeM5pPiUOGDiF1REdPFRh0mkf2rDrAz4E4ZjWnQCHc\ncsvsLyITKJCscxbj6OpXxgGc7MWP0bDgSfYr1P50oXyW8FwbGA9AYxeZjkgd\nEX6pP/Iv66ATzkjVabBLABBU81Yf0va5/4kxO59wvrA+1fvALct0waWMc+5y\n8E/5Ube8b7eblP+uIE+WYKjs3aFrewmqSgUrFQYwe6yMSnR0CV9W3QLCaXbS\ntYx/Ip/GTaWTPQP7ey0m318CjEtWSudcp6lGr2TFZ1piAPrrKVkLpTBRoScZ\nOQNOMqNPZHLqp3rP9bqT2QvFArzfJ0baq5sn+QmJbjZ4aw/zbM5x5MWBQ0Us\ngfS7rx4nwG7leF89Zeo/DNG8roQ7SBblk/3nLtXvSiGmeXHf1zJM9lcFkCbe\nhWj30BKvVysG8OfhL1BbKUSQx/FqQZnDi/34KePQrEOxYftZZ7IY5Y/L0y/v\nWiNM\r\n=pkZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICE5zoYHXe0glmaIvDDTSO+RnlnMCm+QLa7GYBSChsYWAiBOVjvRikM92oTMEilFygSn9ydUhUgXJtn0BMfMs7r+3w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.fe7cca31.0_1627077369038_0.9709742021428152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.fd9da483.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hJ2ekj+wB/QYcRDhuW8HkbSjUILam0TfVCU0jOoEuvb6GhWdq2f66Bdf0SSVnN2zW6fjgkXs4NPfxVDaOVvW3A==","shasum":"90bc202b471e0f2fc8a9080e5e2297bfe651ccfb","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.fd9da483.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yf4CRA9TVsSAnZWagAAHSYQAJfIFy6LnO8h/3ju6gd6\nojhqA8xf2GJKhZ6QTQCVTTxhvv7YXM0hLEMmXpqsP1igoXgyne+/2uqzpAJP\niLtSu+DqGu/qYyA2fXjUGJdf8w3NoFI7puCWy36wMwnEtkl3XU4yT9MPu4sx\nsqPJh46HK2sJpd8xjAUJ/Zcqra621z57Gtu4/xww5X45XgLacDAbUzrKDNMJ\nZYHUb1ws2GKXpF0KHkyUtY2AdAaXCe2oJleywU6bzwySFMxelzQALOn+lfXL\nfW55a884ioHUUQnd/pCh/zT3yyYqFb6uUOB+pApeUvJYiYL1W4omwe+rnG+f\nymv/66OaXTHsME7IMoNs/1x8oZn7IWb7OeK1N9GwLQNN91ObX2lNBo8U3zXo\noTFS9+w4lW5U2eUFXQfUGxCeAhsNslIvo/uk1OJftWAs1TmNzrlWcfPj0Vir\nkHq9vVR93GTC099MW+SW6JcZNL5UPcC8mdx1l+Fuuog9rvPjURX5yKpMB1bD\nrHsJql2V9Dyf3bIy7aJSxAoZ9FVAwoEsqVjTcqIfez9hnXSacdbLYlJKmuw/\nFvLORZs9A5PbDLQCIB9lTEMX3uoAITblTd/t+x5FwlNWhNrLs583Swgc1paS\nLhkeLTWztQsHIocN3HWpaxMe7XBiQHSPpoaQNYSYTYGKMpWLt5K7tsNjcYPZ\nHpoQ\r\n=TGYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr5QNVXBuG8S4P6jDIZsJfJxtyAjPM8If7tFZVjHIYvAIhAKRUHb/9XdBF2hu5mlaliw4Czizf9stoO9xVkgu3I3xK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.fd9da483.0_1627334647783_0.44064079797231237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.8a4c7e06.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Nkhjb4tJU47pU8mN/QMHfnTkQd+Hgg16lkZSrud44Clgwa8FRUGs/uIAv4GX+leXs220SI19cEnuqwh49pCyhg==","shasum":"fa9dc2cfd9e46e1249abbd2627bc3427e2f9eeec","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.8a4c7e06.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zqOCRA9TVsSAnZWagAAyz0P/0+jLTyl1KysQ4BaHR9j\nNPkQQIHMgvgaMttEIdiDe0z4/S3e2PCOQfSa942CuzEclYgoPTfL5L0GonaC\nyZ3C0idPBjf49Ik7S4vhc9DvKRoHUQQYDXoIj9tO6r5Cpk5+BU6s/caEX0zD\nfbMJTpXSmBN7bBMPRsSIWUS+66URTLuPaIj1U7RBzUC/h1/d2w6vBPEC+m1a\nnFXbj8R7PPmD1ML8yxbcIXP4MfTAapNHHVXIucsDnXzMVhtYMme+S7rXu2Vf\n4pEbYbv7JeYaYo6DwxOx596SwFo4u7FkavBiZtJ7NgEMH3tv573koNkcOSvj\nyAQzUBm/f7hcZAFHupF/ckBTa0cNjK6mqcjjYFHSKRnqwBWXOsoIqLh7n0CO\nu8C+NfSlUk3w4q4rt+BxcSfm6SWzySMLWwApwGwEjqxkRoYx8SxzcM9Tq5E5\n4RuyvfjTzhzhLbslOKTzJoxifEQXactT9nhHufNAC3pbEh0Y1juV3Qjorj8y\nLWLDdc9M04fzV6QDqHif14EU95yuhvoBS9TFjLLiJwXS4F7oviOqvW9vQpEx\n1OvJzT8Mg7fnD8GxvTlspOpWPwLJunhO71VgNOtGNKmkP/qdNJs4DAC6zzD/\nfEfvY/28yMT9KKONTOLAFxHXRkGsOoM5sgVlj0x52Mp5fXw/rgGp7KJ65Wvg\n/hZA\r\n=VAor\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJDCe7PxMJ3ZBHhgZDVZN+hDfk4LFl6p+Z1/ixfaEi6AiEA85HPJ6nLlSu5oXqiJaB7bDj4DDZ0BdPa/UdxZHU/Q4Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.8a4c7e06.0_1627339406638_0.47873151050602103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.5b395fd1.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7vbyEZCOaJ3eOP4KTBliti3t2WtzaSN9YPxox+U1/cALMq2md9MybgBwgct5PO503u7HEDtnUJ7fDyk7bAHv9w==","shasum":"dd84969fa65da522e8f98c032d6b143a7cc504a9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.5b395fd1.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI4qCRA9TVsSAnZWagAAtPUP/jjPOsYb3XddYzuwYtTv\nxlxv+PjcawBfOryPPLOwj+jWpE/VrWrc1DXFbbp4ORgjccN9MnwZRNF6ZDgh\nGRAlR00GDeEXSGsmTe3tXRTAtm90+WMvnm2UJU2NCIg9es6A8fCBRkPqFF6y\nRXNY7unA6OWkqXrSJsQsBoJL0yd8U/PA6rS1uyxHi9ba9Aeh7Z0kcQLUBU0K\nZQ5wNvQN4o/F1pGeCxD27Bfs209nKRZQXifNLm5K8J5hM9s9SPkyGz+Pk5Ep\nKdkl/D/OOVG3FrytYwnCvr3cOuFHJojKVGRDsIIlGY0+CbW8egxN10lGgpSn\nKSIWyj9mvijuN2UZ2kkre/q+Ch2tAC5O0IRjeIIxB1PhtjMnt2XIgj2N12AU\nVM0M7iBasulpXGbe9KeLEpRg0bRhPofbaBq2MMxEG8Sn/WQTg/lwlKFEmkGn\nrRE9/+yn8s5lWG35Y0jtFkAY8Za8iIQgAHRwDXlz59Im2vO+hsXzeBJLKjS4\nucZzyMXuS9np3NMBN4N3/CwpupTclmv9BSFRElCJjhuXluFjJnkqzyzS4EHJ\nmp8vyxn1xQvCB8+wWf9m8uwAq/R2mwmrgLuMEO/2Kyy9+4BCrsQYFE4W/Z3A\ngPYd57zWAefvlUVMawjsNbRs5nwXdPSDu+0YGFfrJw0pw2rgfDIhTHFpRoHQ\nSFG/\r\n=dTWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnn9KGh3dqXsILZV2CzLjG6XxYK09tQeSB2hL0VQNd9AiEA06J103U7mLcIYJ3Wffm/gezKlr9NnZwsFkLKmtUxlYU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.5b395fd1.0_1627426346695_0.13714195505001414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.e5efdcc0.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ad65xPWkxH9UtFgAxktxK9exIa4fMdzBGhM6/70PN0yUNZVgylMCDRgChnuR64tBB8qQme+y+iD+phUKy7qLxQ==","shasum":"a2ae2a3ccb8690757ddecda4379cf78ef1ac9bc8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.e5efdcc0.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZIhCRA9TVsSAnZWagAAcccQAJIxWKw7w4kPhbtilUNd\nFiGAJ1U8jgt8Qv5j1ddPyZbTaalOsBGDzUL9SPpa6gZfmfXcmROWzju0GJ0m\nl/dR2noQFI/CsOfuyYKjZurDXhZelo8+ll0hgznyVogVkty9pKqkq9NyB0N3\nOICp4CBDBkXALZ1zy7hNRFf/eOdKoU42oCqEKHhBQ9UKWLxAopD5n1QOs/Ue\nT7OUOspkD38+ST+Gv0J/SoocWr2JPzv42Vu17qNTEivaXXKPtgJHZYOjqqWM\n0WSJ3w8pdud9wJyOEK641BiY36jQBU399fEqJJd8DnO7kulsKxSdX/xui4qp\nHvy8rbaOYkyej1zLq9+X43Ad6Kt2beIM8LCvaFcPcT4aPrZQUN962keoJEnS\nDWynp10YQnAPCoajU8hWWdJRBtqFiVieZN/63xqkeK5bWOjIJLTcNaAeRzPp\ng5Xg6smIHqrHBnu56SO5TX/i2Cj+Ql2GMqlVwGzMZYQ1U5yxsMvefBubRgWM\nsr2k+CkcRbKcoqo2s0ycUtZgU6bTnazeo/CFf7SI7OaLKT0YXbMYWChVkqbu\n/hIpBl/sxeF9Etjx6gh1Sg4CF4gDfL5kTkPnbu9vEltDaf9beZVtOcxAK3yF\nmHvD/TD3Q5O/nv1Sz0TvBWXM5Ip1FC9V6tdJj48wu+gA/77IqnuRUq9x2V2D\nI5g1\r\n=p/g8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiQNqvEAWBdMZPbQIw2fGeun4RtXtXzblXa3+DnqDw0wIgKY+vWbNKL81UaKnzQnF19FCMsj/7sygnclGfyMBtaYg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.e5efdcc0.0_1627492896810_0.756939443455569"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.ab310900.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5n9+Z2RtVXktkl0Ws+jISVHEcmwEbf4pygP4jHIhzn6hrjG/4kxsvdEjdgadQLVeBHKanMVbHIDT/AWVq0EEsA==","shasum":"a4bf6f7a029830628d25b2b8d2dd492184e3a60a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.ab310900.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbwcCRA9TVsSAnZWagAAad8P/2IYdXY4BumASZ0v41kE\nBtCZ1tDgz/wAGSc5AwqGWjFpHf1OkYm5wOfiSo1reipM6y1Qi9+YDc0WMCqN\nQK5xetvHpyLPFmug7GVEKekfBkh0adW07TK2/Ck+pATJxGcZNKvY443tqEz1\nKsCr0GPPGbAMny6WAQdBGIJZG9jj4fPCr6hU6iIVI5MMIwQ07gblq30YheLU\nwfEoYy3Xtzde7StccvXr04ITAcMTwGib0dM5QV8dGsXHQ5AZfsK7iNtXvHN6\nmDjlm23ZI/fnoCwR7Nl/3pnIDduF+u0js2/Ik78WH8jMB35VP8SlbpwTp3SQ\ntYHgKNq2iij1YPvKAd8pj0O8GW589ThKlUJDl+mpn+b0SdpQIuYWYfD7fQcp\nxWWwzuXRqPEd0qOuyCq5FxFOKrC2H3ju38fM1eFk1teeatikkt/QcTGFwkbO\n/YyGpCnm5toloP8ZwAyUUIQhe4xIOr0BanRTTgmaY1gDyFE/DXIp5A0KEtYE\n4IjEo/wAkHJrvlfZebRANgmrr3cEjJwEkuMZ0CHqMaXjMOwZrfuflhyR9uAj\nYssCjVq6nhWCSyGExfxI6KFehblBvQQbHokzYpC2FeWxaLwUdvkwS8TST6dp\n7blyMl3ryFh1C8xidwFFdsNKadh7/FsOTuhZLL15lQTFbfH2rczYnZbbS0OH\nEbr5\r\n=OBNx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtbnvoc9TpXDXgi6siDY5z/JDOku4YyUufsfGSSQ5pTAIgdU96Z4MhVEPhOj6lnHZU1ECeY42chSv7WAR8jYR1CvA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.ab310900.0_1627503644731_0.6716243324766684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.21dc9bc5.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SGkmeZ0F+j+liX5ZrhC1PsSxcSKrQOyIqAZx4W5mNStG+XwDbPHFW+SEgO/xLR/udi4bUfrebY/qmfbNJcBwOw==","shasum":"f03cfbb6e113d51c65b92c1b0f5ab0827cf87523","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.21dc9bc5.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb05CRA9TVsSAnZWagAAuYcP/iMV+dxvdWfpn173mo9S\ny1rk6+zB5zlSe4ulub2c9NPVgEHfBsgEv2cSRbJckHwyhlVG2xcazfOlHJ5i\nVeBjGanpxwPHwbwRu4A/6kVUuQj8t313BC0HKJV0Gthihi1AubAI0WjWYETB\nwZRPqiMKojPW4hHvEBNRdy3Rx6O7EEgK0DW9iMA8GMmfjzIU4uq6S7jnjDhj\nGlZtuaHs3jHXcb4zeFwrX0A1ZnCDmazxgZosiyfcz8jypkcWrSXSAN1/xFNl\ntzB2hrKM43UaVKJxcOSTe2DXUIj0RMiGS2I0Z1O7e15bLF1xQGFNVd6M0Ova\nkr3DOTdzw1sKe4FSEslJAhMF70s5roHHuJOJsQimjRYrUJp8rR6S0SB/w5A8\nou3oKWsscI+VAmNUHbKoXjIHFcNhG63bM2Y1xBCzBIWG38antrVfImVz5PZF\nNbtyJ5/cdMZKentrZyL48WrniYZGdkOVbOE7nDD44oUgmG1dQJegUsMs+YMA\ny6O+K5xag7OWDD+d+2X8rHvsJ+iYFxoay1ox+DRDPG8rjlXLZHTZ51hmSh5s\nlPdyhSyivFU7acQRKe97SpunGnNRCVIILTePmFqyAwkcOihtfU3oOYHspy4c\nlTbyH2zhy2XKnnTYsfE1cO9y4HrNgH3uHjdqYWurIU89Oi5MgRbPr4n+kK7E\n0RpP\r\n=MQeH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAX7+j0KpAxrFmUpfhfD+/1jII3wuUCP/CEvIi9TI8piAiEA4XZlkiAu6I6R1QzWVYBF1DMGN7LbbLcFD81QGDWZmI4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.21dc9bc5.0_1627503929213_0.7636916979264878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.68c7fe5c.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZMG8sjj5YuLzvNrxrKr6ngdymfVGA7Ry1mVD55XXXObR6Iuf7DIry4rXD4y2PerlxEECm2HTqsv1ONCpsbHv2A==","shasum":"baf6a7f95935cf220de8ac01edd2fac68c41987e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.68c7fe5c.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvPYCRA9TVsSAnZWagAAPIgP/0+IxN1W+iuPOcmjTET5\nhcI70TzpkCQP2tcgE2GkAkwPuM0Jgl/G95T28feEsTZs6/Ga6kW0wnhRGAfx\nu2rmq5tVpttlyh/v7GoBiqtn3TLnQyq92mj0UtoBwNcuuh6MN8WIuVrooXZF\nLMtXCqRXfN+cLMVNOXnazJFuIe1jfZvkUo2vVRgQhc7PadU6b0IDuy4BKOOk\n4KqwudByetAyqPsIZ++mjFC8FhJTpcuxF48PrtEiRJfCqoRpFX1gNdDms5qR\nWQXJAUfydL1e24PduiLEGg9lzcETh/eTzvvPEBJV1LoZwOK+PaNvnYCYCLCv\nkXRPzgLZ/ErA/vXc7xsaq4LzIuuN6sW+Cfa/Vu1eqssMPBMAdbSPAt2bQS4Z\npEF7raZeg2gwO+TShL7JiJf/dG85Tt4fIqK805KWgzTW16ibhTwjozlFZKXE\nNXH0s2TgUlMHNPR9ubbJuTlMfEqAF4MYOrQj2ezW7FlASM7eL/Hi364Dt71E\n2Ywo0ph981BI2/9198FXMsq4SRdRD1XHGOyWX9wEWLnVNNPWh5KfVb9KMp3I\nqsrfnQ1RDcEbl0c71hjTnSABKgTN84M3cf1BqLcyHxemKsZvDzpRYgdCD70A\nBx2EznCUXJL3JLJCkaREB9S4wrM3oVU+/U5Rw+GJT57uuGuUGXhll6UGc6G/\npQbc\r\n=fNuj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGqkKNpH4dHgpbwL5G30Ssl83P0Ouo5zBcxME1K0NgBAAiBXot+pQq2UPqDc3+1k5zEIoejkr9FB0LwyaLh1fCFLIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.68c7fe5c.0_1627583448252_0.37492959293151773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.aebe39e8.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3+Lxgy55VKfM7pE/r51sj5Lk9/2kLh3KQueQ2e4gM/ReELx6JTpwJgI0yHxMetJkMC1pA1Z38qtbXUs9I/tRQg==","shasum":"123ad10a7f70f2e860c1fe54733af54b73478e9b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.aebe39e8.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE89CRA9TVsSAnZWagAA12cP/3KZF/xGEDfcqwlBJK4S\nL1i2FLL5KepsJx3Br3PQUqCPCGKJBCgZA1f7VQ+Y62X67alOSJ7q9ovpJKwG\nKemSYDPr3JCIKTi17t5fHZhgGAZEFZLV4BLaimvkMi54+OkioTr5zNBeAqrj\nPeym7E1HI/wx6IdWgkwT7Fu0xaYO3pB6hlWTDzg7m7n/xxITPEVG6vtjL6Ly\nWsWhwVVuzd78jNt10OZ4uBsSv9nQ6/OzVAVNqeMX/raCw1h2s65FufrnMYlu\nHcyqm+un6gACv9Tw6ObOTBPFQjbpE5Fq8IUrhNHGIhUkbjnwkfVBk0HhKvMS\nu8BanRo9gfOKBmfYsQfZjrJ7galyjVaYZShWl7uLaWHC7PhTz3w4BqNJRVfB\n+2BJXmYvXcWVzI7IEXVN+NaD3bCL+JmqhfdXvC1HB6HtCkGhi174/rJ3gkyc\nmnWIWYpsEqHWLQmayJ2DqEyS+GBWmDoFoY+rrpWgNouOz6Qd5fzEniirocaO\nBn29D8yHXD8xcoevzGdsr7vjdlTdH119MbvGKse7wVsRMXJSXbo2bUIjkv7w\n487Cg0/bS8weOo2A9jGHkHHr44J/2eQ1gsHq+9SjgHK6SREBIO2sZHzdGL+L\nxfbx3Ug8DEZ0+1AD8kJpk96//p78+81X2XOZV7NwGYuKW5rhvaPKLOfTexGa\nqYRb\r\n=0nzn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbC5GbI9yNfC4E0H29AfGJWiLrz2mCdOw1XtEhjjwz6AiAhuH9KBjRAV7KowmiU7mt7VjRmcopbFFLY59gSu9MCQA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.aebe39e8.0_1627672381558_0.7530158479950646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.ea889c69.0","description":"Material design floating action button component","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay-css.js","module":"mwc-elevation-overlay-css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T73EwSUlW677lvFdSyyX76a2rprrM+NAYawITG58B6fF8c8NZ79cqEcpWAQ9m8rNssPAAt0d+Lt5xCf1+e6Vzw==","shasum":"7b63319d327154947e0b41e33cbaf72ba54db8f9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.ea889c69.0.tgz","fileCount":16,"unpackedSize":416040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY8tCRA9TVsSAnZWagAAHbgP/1+0HkZVGWAsFivcdCgO\n+woquLwmuredELQEyPHL3SN640o0Tz8fWb/6ODgTqkEzhIRK1NGfWX6Jt4aV\ny6fEEAEX0S4G/AIN7c8xmzYSOpV1NGR6BfiGvmaVXsif4zD1oSMRMQfRYsfu\nhhiaBAJIO+hEQlrJoM6mCJxaneCQMA25phIk7m9aEVV8jm/5iZNtjVrUco/e\nhLpWlJ3SVuDCQ4SDW+7jkeaHgMEF8IYtQ2eMoiuGEC5pBD/zWOtzuGSDogw+\nAMLdZkdiJj69wbFUc6uBjEcTgIOT7LAwRKINaHIpsWI+8Hw4qqnqIUQUtqET\nMHUxBtGKeIG7GW/1r3qJMrjCK0WyxzGuoLMCaUspCleg5oEDUTLpCYZB9pv4\n3EX+1j7q7ND1Cq3W5Q/InERH/W/Noq7wq2WU51gEymPyzeNAAFLvY/hN6mSK\noYHlU4beTQpVA/ZJeF3AFuVCzRSsNJ0SWnVgKPDn/3CYJJMTt3bn0u/jSB2V\n+GQ34+yOCbhGwd5RP7emg8sbQ5BL4VqoI9UczdDBsMMkBC7PBjDzwOdjxBXP\nW5lRufsb/JFQrMbQQuaWUASwbXmAkSkC/TIOJEE3plYzQX6SFH2rIlNro7ia\nEyAEmpvOXvJAN3imVmRRGxdLKvO1MoASqlLSQ8ntAknymQRh2eowfRSE2U5I\nBB82\r\n=90dt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVGIMub1Cc6oVxhlnac9II2gY7o5yhucEtlxoTefuxTQIgJrjAtkXWjqU42wYgVe/PIWZW6c3ZOBQeDxx4D6Z+a/Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.ea889c69.0_1628016428879_0.2650890689665988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.21918905.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-01ZTL2o3tdUKunNGAR+8gD191zXxXaozrE+lZdPViYTxz5hctb7czgHASLYajwWKh19yEE11M6ZUWc409x3wNA==","shasum":"52bfa773be9e285d18ec4af622162c4d441f21ea","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.21918905.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbGKCRA9TVsSAnZWagAAsUcP/3BECwhDNybP6kuw7Lox\nSo/2A4ax+lRnxzKAFuQoiiIaZG2a/d+OAB7l4dXQ0z1VMl3dDYVIU/B0bk4y\no+rNYcOUE3gqymNe7aUVoOjwtnanupnBszcu6w+8a8YtNal89MiI85YdaHJI\nzvyKFBbeh3gld9jwCnAQw0dndVVf2fgQRakcrwLsGOQRRS5C7HZx1RNfG5Lf\n/1GQ2zMrB+uDcAQIqzo962XAvgInSa/Kym/DQlSFdz3Knz/7quxaqKBAd2aD\n0XlwTcFDPYsvWUMxEGILZCssXPtPoGSGD2ym21DcJ1w8jUqlqf4PjRew2ror\ngDg0bVDeujzlyMGPImaOSMmIqI//VbKCgRFpQ+g0qq0b4zi26cF9W83g2EG7\nQVype8nYJWhG2O37COVqbsH/M8o5hiNXxl2TkTyXjWUpYu9gOTwbAw0kr61U\npSvCD8wp3as35jaEjesCV/Vd8eewoINkzSy8eEYsSU5hu9ida7ss4x3nzYOu\n0fcjb1o5Zh3aZ7goCP8E1iIwYeePxiZhbfEtVBfxMy9jvRT54JqXQllwWiw4\ng2pQojRSkRki5xu5xbJ3lfB6FhcFPTau+L23RaAJkGGod11HOINfcPSjOfoU\nGlr2PVWTBej9mLAcsXtmlImBbjvQc1irK5Q9Hwqs6wjjQZS/wvxoDoktTCiv\nDkU8\r\n=oj8X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZbed3iXh39vGU56LKFiK1PK55/DrOQOsGU+jWTi1ynAiB4P7u+D8TlWBSu9g/sKbKQGQXtp8jvsHM0KCTP4EqWkQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.21918905.0_1628025226620_0.4263965515076664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.193c87be.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oyceseNUkCy0c+kzikhzTtwxqs8hHPCbJU2puBAnioZl1HUsTHUNlMs9eEi1mMcOqHtz74rX4hClzbNnZQCmqA==","shasum":"decae9eb1b2295878ecfd368087beda129e3c372","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.193c87be.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtc+CRA9TVsSAnZWagAAoYAP/RWNtcgd25HghYZGowsQ\nuiHFr/ElHSiY2fuQOLrTUYZ85Zy0fAjSD4z+0z8yz/iGpwlPKwVojXIbsvK7\nplTDSU6taCocQ/VaMpBgycEPq3yUYDqueDYjYBbjbN8odxOOJuDbuKw2lM31\nM1dBW4MFDkaG/HiDliTLeGasRvqR5Q5Zie6rjcsQzUgrR2KBH3LCpRUbyva/\nY+GHjqFjeUGkgvIGzjYXwVZeXI6vqDzyTuN1cCQwppjvLScsH7FLXiPt4tbU\nxRpmn9pRtASUEFptlrTCSxBRLlt34Lf/9hHvt0j/h/haBQQUFnoBulLjVG0S\njOiH+x9XOOufmdc17rU1DOfXexgIB98DtKeFLYfJmohwNIO22hyfmg7us1TJ\neVW1nPH2D02KPSXL6jGE7yDnJvi3/g1apiKK3i6onl5ROmKex160a+qvCo1l\nMJpi3aoFAz33fB9JeAbf8QqIlagwV7wMv7tTE4plgu5NsGRqVdDKSqpzR0Ws\nSkzcmRSOEUjq5mr39gFzQ6+7qOZmVHIANRLVjydxUHVTCMfC6778HLpVZ6F7\n8Kaqb8qrTNwGcwyK+bhWW6ms6P3JLW6kp2KrvitKf+St+5QqPdGMQAOrv4/5\nZx5Wd71BFE5DedqR5W4jRtiTtc9EnefdiZGdtG03U6VeBqztFNNnHFiLYeaR\n/mOp\r\n=zskv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOUKj9FkbfGna1YJZYLIbdGYTXvnwYiFAT7esgl/AozwIgG7bz4rQnf+RwoAoOu67R8oyPl2CDHmZ5uoX4MSnugqQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.193c87be.0_1628100414033_0.8604046917218984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.6fc52d8b.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GoeFXkT6U5Jx/zAmN+AinhR3kaKacRS58+ktz5CtLK4clZkVWlg1dGYPcloxQmrsfrpcLFi2wg47m5li6uAOKA==","shasum":"2840c759c8d6bbbf50e56fb7bfb7abd8b2be4ed2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.6fc52d8b.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmFCRA9TVsSAnZWagAAsrkP/3yWNE7p3JBhWLYTspPB\njDrpnm3foCE5tkU9Z6Z55d5kKt5z/bNJwYyLIlmJ20kE4ksH8ZmuS9mqd+W+\ne4ZRYTHl3WhZOGkkpTwFKJEumOR/1a1PLcKQJSo2SphkbghQXGC+lZ9gybuB\njvj76QqIViJnd4Dqp5NzmTQKLyHPJgoxsNGNKlTcB1P+Wan50N/VZoN90A6B\n7YgLz6Abcy+ELOaSEzXxGu936SNjE70dvIavned4HDoJMt7L2rF8aJPBqV0g\noMKDKSSsV45O+8NaBR8OvSLl6z4X07njWgL1YI0Ke692n3lBwMBI4i3RX6GZ\n14DuoeWBM5y2lK33bzWstT7Q8ftZrNpy4wR+wIl1RJgg1UlinPRrT6UlnX8+\nobZbv7DzXAd8Zgc3GFPId3qjr7bg2W0STeNtmQrLkPjoIvz9em5fWyTazGiL\n/EFkmvpZYFaT3xgrCzkb7MJVv5bVX0u5i4MUWS++9AJh1TrdO3/YjkBJ/qsg\nXhheXRQwPYPqrtFIGK5d2/umT7E+l8zeVBmGpNTb+W59MfmVx+RsKBuQ3mCY\nrm0xllRDmwgVi+HOnTIA9arjAJ+GWbbHg0sHx1ViUu+pKjerlgU84bVD9uUz\n6f1876JvcRNPe6KOCwXWvtOZKHL81a8M5yzZn4ZgUThmS8oUfjmxPyt6StyO\ncy07\r\n=liLe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHThrTl9MDHqG/+1pKH27M41PsicQWU94IBTChfa58FPAiAnjC5eCnAiR7D3SKlr4FelgMn7Z+YqB2ccH3WYNLsmtg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.6fc52d8b.0_1628187013499_0.09992959745641716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.e2e9777d.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jhkjwS3nySjQA4lu1YHysXyGQyB+FymVxLsgveM1McfLeL+ls8OnQLRu6FYHi/zpd7yokIYnHwRcZxxpNeM/OA==","shasum":"a1516b8993e9e37f351d4460bf8b93211d02b7e7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.e2e9777d.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGpYCRA9TVsSAnZWagAAwJYP+QGY4rPojcoB9X9T9Rg/\nD2arvBSYY//MOy2y8IFFEZznGtzcbTBQJRwGUj10GBzS4vS87OuHBM7xrktR\nIW7cxFFteNVtXnVEV8aE7qiSudenvkx6CI7DHtZyDsbrbYuFAPKf7SS0CIZx\nbbMHPrFFnJSNimfcJpmSxTMolK2IwOsOH5kUAOzMjYVDUlENdzZrruh8IMXg\nVlWPGAtG9u8Bng4B4XJM2YdeQs65RU6lWbRshULF2vFrFL3f6AUPAPJb7Dbn\nyQeGdE2GaxBeGI8JZH04zcY6wytim4KPSOET8gR/OV4AGM1VfAH0tbyBN6LG\nBje0L9KQLiSHypkt46IbA16jgqVE+bWqEEtgbT9rCQgA6H46R3KpruGfGuYO\n25ls3ApUll1hxFr/sNjdGq2Mwpt9EGLz9vF3DJW7khWmGoe6x9+QEKadIPC/\n7Smdhp1m3gWzhW3tqTxmN26i+M8GsHegnvJox+3WmJQw+RVcBwswXgY2KLdA\n9fBOuPlXotKX5N7vWPfXPjEpXZDto1jpENUMw3+e1OS/ofdpJsTKiEd4K/R9\nroU+e2/fa3CyfCqn2noacFEUX/jY5peYpXgHU6w0zOppZDMYwWL5hJk87037\n/xypYUS87IcTm0MN9BiIgbhBRPYFsSs1a0QdxeDh6Os04jUaQZEZX5eoCPeY\nafJ9\r\n=+SZx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFu2A7BFC4G3a6Ns46HVm+UDwzpmrDdRk/aVl4w5/fIZAiEAq3bGxbeVKe7gbHYteRooe4z30QJFOeSkHe5Y5tVThOI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.e2e9777d.0_1628203608579_0.8275474207221893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.72ff1e68.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x21i7tlL8E5EX/+eYXgpxmbsnJj0Xx+vruV78v56qPpfHQcGbqEKgr8s6DQkiCfK6yK9zlPdOMa/5eqp93fP/Q==","shasum":"606ff8c6a134eafefa9f744947c3ce1b0ee37631","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.72ff1e68.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaANCRA9TVsSAnZWagAA9WYQAIza+/R7jzEFGVeAEOAf\nsNO4ZZMQSvugP8GBQrX+HnqtpFlj9DW5IwSbhbDTYIRDd+3SFYW4qp53Vr+A\n3ZREkvRg0WHSHDXMSDj8b6WyUmfPxvonkMTdgXS1xnE6AsfQGWrbBsxz0lcL\nAHSMCungEtYO87udwJsOZF83tb2/eLEKrQhLcqiSKbPf7Vwc3x7TOfjjyNjG\nxjxvcEiU6+zhIep+7gUIfuAVljbzizTYMBO0EdeDjqfddq/AUPltfaFoCGmq\nFvLK0/RxW5x5rfht4WVjO3r5z+Ct01WU1T1rxnmr7CuSuYcLskyYQd0NJPam\n3ckQn0rc5XY9GXIGcECJ0ujTD01y2HanqVms6PHAp0WLIOHi9sOfGhEgWW+K\nE1YBPvbqv7mLjnodLlIYQfRZp5hag4bOqzh2Zec6P4WshkeS0G2AoQmh+JJi\nr5rFfdtDh0o9RHzKWVsdq3g8zPeYiJ275fXZwBej2r6QVPMavGwjPVZCfhHx\ncxyJuPEe9mThQOhjiNXVug12Rhk54VrVu4rjN6tIy78koiMGkquHHxGfkFKf\nFxBJJGnmYitI29uuwR73rqkvlrv1WofawyO2tKvXUAnVBcAlbdaUBhzvr8+H\nBA59nSq4ABu7Uy+MD/lhZgJQ5QH1UzzoggLT1RajqIo+3c1fxqTtAHaVO2MR\nLzs7\r\n=IyMC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsl/oB6AjgMXkH6Q3TdLqIk0YWtku8r55Rz0GFTifrlAiEA0fq/sw3Qwm16P3Tij5xhifOiPf1rcxz0wz9sPwEIaIc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.72ff1e68.0_1628282893117_0.3563959849509115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.c527e93b.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o/3UoQGCI0yNEcEx0e24pba6JSjYjANTlhhSH/0w3lHveLAnqnCszF6bMd03K8Jy7tAJKmA/4kt4SK268EhKxA==","shasum":"7b0f57b104ce7c1d077865d7234f719aca4de6db","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.c527e93b.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaURCRA9TVsSAnZWagAAsGQP/RMfUvj6fGJc0ay6b5xb\ncTLcapK34XyAyA69PNnEjUoKxYeAPxD32viZXcWRzUEgtC+nq1RwR6y/2j8W\nyaSFzRlihOARjPZr6jjhV2cxnuxK9TlHJGRthYsjKytSDXK7yUIYJOuyLeSb\n5SfcFebKXMvsjB2XVMw3ts9S9zhWBTfCzl54P3uMje1/9anM95FneE7mht9e\n2OpoLMcKgUr9zwKq6D/ts1mOm6T7w20nVlu8vTgXaO9IVmWZLgdyAN0bGdcN\n9/wZQfebBVM1uuLk9u93WlQjKW1zSVK2p4Vl+VWzDrATB8kjhA0pmpYGFcTG\nonFHZAXfPAtB0uHQS7GWiMspHvLaLq++G8EkA+jdy/IxOOeP/nRYdNMmIU2j\nqpoZgFujFrlzhs4/4v/xzd98KT5xaTHaHnCtKGu4RQVIOrTPtXlCQoZyoof7\nV0Lg7pGzsLmfMYKlSLB0+MszqpK+CnbYdX34BvwzD6wFS1F9aLXjIvu8CXeH\nV2x24nmgdl5H6hg8CogvhyawNVFM1he150K0dPPvknIpjzA8+w1Xfz7DYD2v\ncwVPQsy9dLLposHW3KVCCJeCbViuuN+7vCRnoar3OBIEwzDWg5GA07x+0ssS\noRK1jISX7amgndDWGn+lfCK1FWRUzzXulxew8UQ+elnY/hRZSgQpH3wMs9cg\nme4D\r\n=N4Cb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkm+ltcq0xrg5Lru+2EQ4noVZurj+NUzIjb2TQQgPOYwIgN/FQEvbjGm1XgOWZLYujrWa1NYHZbKM9ncmsD9VH/BI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.c527e93b.0_1628284177575_0.3331494377682547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.78b1eaac.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mRH5HGNyfig3JQSTwWRRrMkJIy4UTJQGsTKTy8kMcLN0PqEWFuBCeCysGSOYpzFgu6qllf1qvVve57K+rx6tcQ==","shasum":"bd51057b0a9abb565705739da36e96a90aef90bc","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.78b1eaac.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW3cCRA9TVsSAnZWagAAtzUP/2EgyXqH7hj/BfkxE0My\nT+H3SA9PrsZ+XIlYhk6Itdd4T6fVgNAwFxdaIKw6gZX2dpUFuOx5fP10WMTh\nMbZBHErQEkmp0L43izWJjOijyOO/HsQRP547oE47HYVTUFRlQ9dbV1PmLdpt\nHb+S5pKdZVFdVq0oUA31qK+OpXZpYZg3tKMORTmjNQOBP4m3Ly6oyCTvC82L\nO0RQe86PUD+Ru5KGNr6eaHvdn368ZzVRTxsgzVO3W7BxXI0ginMnDBbovQjL\nBP/NNQKsODcNGa4NNzTJGu5Sel8kYCgDmA9+6u4FBCF59jIbLeMshps/p/GI\nyn2XrNCPW6peGw4BV83iREexvmRu+QQMEwfspGpF3jNQZ+ivm4e392cvgAz2\nm4O+fGVKGAw80ox2yowdTD31MsmY8bxOFMlc6t4bDSNlplzk1qrs2aLifi3B\nG9qBpph+HOLsZbZEqya2KC2Wqq/gsUxvRTWY+pMmnyb81ZhnPm44Lc/mfb4U\nzIvg5VQ8c5y5/QPMk+1YcKGYkEq3sl3UWL5+wG1Pok0qqTrUA0RjvezrHxHB\nRtRm8Ae89az+1q19pzMNDqbg5FCfaSZl1GRK+UeJxD+9ke/JfKALJV2wZaPR\ndLGG15fHpkQ51qdKoUinXjun1I+K9N4Kg4JcqM5JPoR75lOQPyo1l9IbDwAH\nkYJi\r\n=6Om3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzFWjVsEqd94Mxd2YUhExsgbKgBdLRtP8/AZRc0YXbsAiA53S/8QwAg/uPY119bH+DNvak6hCs6tBN/AbPdNRV+Bg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.78b1eaac.0_1628532188152_0.864327747815073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.a8a4ddc9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dZ6YKxetqPny4qGxDQec/K3ah2RWhz7yVEIDFJAf9hJCkcziG7tdEcpsldGmEQTDL7hFTibtof8ULPU0EgDK5g==","shasum":"da0a78743a96e1ae732064425399447e5c43f4ae","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsl9CRA9TVsSAnZWagAApK0QAKLZsZp9l7m7YSKEOHR+\nEy32URPCafUT+Bj53jF5lvpbGf2oDxwh9jUMaKIvZbBH6IUYRUCfUX3oqtxm\nUm7lzSJBj7kUR2RA/7FCfAWyaihzVgDH1AOfuSstdoLD1C/GN0lw9egCVeNj\naM1zBl1N05wtgnQFzHUYfANSDt8PZxseSou/YQKI4TW1/SOkfDgVhJMgO15u\nikRgukZIk4VxTrBHdyj0udvGcOqZ4wPpnfT9u7yp20hOiR/6+4vINFp/BFT5\n5QfE+N4AGUq29KBypKxQ6HoEdbgnkcx09i3J1LNySJ+1QdWpqJalj82C/kQX\n0Qx8uqSi4tydbx3h2SNF8BrIT9QEdVPNCt+hFC5gzJ8TbPQB7V49qP2CYf+8\nZVIYuc5OlWjWOBDU4Fs8vXhttCNMqqIW6+FLEZg9+quZIWJ17Zzxu3L785/t\nHUWzO47cI2A1YY8njRvQ5LX7+9oMSaxhRXJQeq6WcHOJPhYSdBZnEKx9Gn7A\nUqnSskFdkDiv0vjDcrzUOVYCNVF+MEb/T2WYddE5wA9vbDXoLb1GcxZG5kk3\nS60ouhSHyN16Nq9Kh0wEfrmA+ZMQpFC86G9jGb1MfpWp28kxNae8ysflToes\nMsJMAdy3IANbs14cS6EkmDu1tMtzPNlLwwz/sHfoH0DLfsOkjeJyx87qqcDY\nOVVT\r\n=DZ35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANg1GrZ74VflCzR8mNVLkF1QFdMHCxJRl0H0LUnwD3FAiEAm1O8ebZErVSvuXL6bIAx0ullvtZuulX2Qe8tiBSf7D0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.a8a4ddc9.0_1628621180888_0.2732500789564549"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.99fc0632.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CGadU06JcVEoKktfSN028G6guiuiBGO/nnrypxJaFNAe4Z/mCERHqUc0JajMfCcfdwcK08iQpejVH6jVHlCnHQ==","shasum":"372faf8b0b1a4acf6476d9839a3fddc81f3427e1","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.99fc0632.0.tgz","fileCount":16,"unpackedSize":416061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1PCRA9TVsSAnZWagAAe2UP+waRUHp1+SNH5Yd6208n\nQt8Wgit2lfF6iIf5R5dN9OM36BeXUhvr7gu6cQdceb2j027vIqD6QEaXvlLf\nN81V7gOk7AvHimpT3nuOGiTRcgH1c2Y8Paf0LKEm49ELHEtsiIU36BKkUkyt\nb/oJ3DyN8avZ2LBSReVrC0fGMgJxvyzIFBS1hg3/RnTc5D6+N6q/3aOq+NqV\nSBtDad5oZJWvKKMnEfzFO1eT1oI4vQDLOj90zodKdLQ48Kx1KmP5iDObK689\nktxd0nQswbMT04IIeemIv1sczDyiWb3+L2gpO2CpJWYvx90kfb1xPtJICahn\nUnP0uDMhLjb7dQyKxeZlE098YCnWutpng193EpTR7YLm7O4YSPasJHcuaH6/\niHWGWeQddzlu3G7VSPjQUkc8z4oU9YlnerbAG29lDhVYB31ueIhK3XtyMGzX\nBgVciBukZJOVsmLFEiVx62dvfyZkDzQDo+TO5+aNQmh/kUytN9UCSz+2t4J8\nX/F444rlLzJCZCBYFyK9Tn9uZZDiIKT6ChMlwQDciJDTCjDYRUyGIb6RYTCs\ng0hCL+s3H4WuTSTP8RQCa2UrNTMcHPFvAucdWiYgjRrK/RcPytGKDAgPejDS\nFzPyVZDvtAZ7AFlgXtf+NoRX5vFdopXoq4B46e3xvJtw9hrAvgSNcWmfu8ig\ne6na\r\n=bPQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqay7HCQkHN7jyj7RXvO6Ixa/6G2H1hew79d9yd6zbbQIhAKBBH3Ymla2HdU6prf5GPB/xyWAyUbVj6fZK4SsEUuET"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.99fc0632.0_1628720463494_0.9915451254475103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.3f47ae57.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w0lvlp4NlQBCsBqtyuhEgcVXLy7GK2vmamkO5VhkBTQLpCsvU568cd6N93YL09XhEPFyW7P8f0hxNBoB7TlYpw==","shasum":"40c7eb2dae723ac26abcdafe5c5806d0024133b4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.3f47ae57.0.tgz","fileCount":16,"unpackedSize":416017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWF9CRA9TVsSAnZWagAAKjIQAJLWaasVgXncYuF3x0t4\nwXly403YC/GUG2LxSLiydaKrlqARL+YbVF+uoak4ZV8MdMr2ooli2lqJrKiI\n4P5cEuufb4ksjvRtQVcIYPsjdN1xW05Q6gSo1XMG8BAwIx5ippEC2vVhmGbU\n14W0ZMEFnHFS3F7/IpakE7zyjA+nj5C218iDUc8kItbE4PbpkViwcF8If3sw\nFTjs7X6ZFWk1NhU9bQEFQ4WItLCZfNVG9qTYYGNAhEBV0azP1FBf1GIQK9qg\nskKxUdeL25m7AT1LhtrQD/2YAapuGZSQNLoJIQLCqILqJGhiiuU0EEQwkMGY\nuooD1bqz1/2vfo9bH/ymxMp/3tfxWmdCisQvBOOZUVxEDIqnHrjkfipIHu6w\nE1AeEgmeu4sDEKvm5XmCigzYwjQApL0iHBraakQWDshsdobtI+N13PdIsYVC\nZOJQ3MDXC0ml+cdZwZBamGkVZKIs5OJHBkBpxOwQ9Nc51yGBNYuMwXjzlKrn\nuPIueu9IJ3rZlaBcfbLl9sb2IHIeV/xvUIQ59O+6rVuSWcMJTWO+d029Xj4U\nbEOQGvs7REwltBtV8jD5lt5nMxRM1h4kt7/msqZWFiMVAGAbG+LpBYpGRFFB\nwSsIU6V33na365dLtpe+uBhNM8FO/uBxxWzXbBC/ZmoZmi0xGu1/OEAFX3Js\nOFfo\r\n=SP6e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoMvPAsmKr5imoikjBAepcrx5Lum8asnSEYTXZvC7xjgIgIxquVxxVpeIaRFuUyD5yKfqWIEF21rxn9yt4JmaaCAQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.3f47ae57.0_1628791165409_0.8078819915212476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.6b9bfc32.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T3mO44E+ga9YlZ0kgWCgFEwQUGDjd4e4MB2OrSuOLKSED85TWOXicKHCC01X2V3LjDUpcJfExmgH+REiXd+W8Q==","shasum":"2e74205912b10c6a021ae655e3139f4aeaffd048","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.6b9bfc32.0.tgz","fileCount":16,"unpackedSize":416017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWclCRA9TVsSAnZWagAAsjUP/j/ACXh5Wx63BnGxJFVM\n4OhWf1fFKQD57Oce7RlxHRiu2/xPZn2Qqu6rUfGctOp7Ehha3i4tUCKYXRUI\nxnB9K8lNz5DgzrkzNcGVYmgtHtGj1/4zCfK8hfrNaUy03Lctq9wIaadRob4M\nopWWZmoDQYpIBbhnXYKXaUO6IfjRcEfsqcFcvtWPfO5vOyT+1L/0z9D9mVl9\nFz0y3zUUhxz1mH3c20I1jB8Tbjm1CEwJUSxcwhAYjGIXQeKSyX2oE3D5zzji\nbdPqDWiVwehNFsLKeBwUG1vYAJTZtMvcSiMx6UDfWZWXD/Oj9+g2Yy3/hP4V\nLj05jOvJsIBKdgUD6zw92ROHwD6hzAjwbBXJXXNm/CpAgy3Fer2JbJSrviBW\nSYqurNIiqjXY8I9a19dZ/EDrRZVxEYqJkg/z1g2Wm0kHvuc7mPSnP5x8F+9U\nyJ08piUgCeIxcyu5hhC04+lI715PWN2RUqNZYSb+oNqokbPzjh8Ok6rbbkjX\nWnnDSF8M0+VyE+/FhUTMC6K0K6m8x43JB0Dj7P041Vd/7kECcEwwjGPuh3eV\n7ziunskpuoHEnTXHc74TkBKjAZY90f5KFRX+l47DY3eU3LTrz0s7IsPfBpVQ\ndpbgv7lCuK17gGBHkM216X+SdFaFEaN50MGobVECgKa/fi5RJ9b7vzTNZKyQ\nxo2q\r\n=MY47\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7V0BiKS+x94rGPmdC+rbpTkLAAli74ehhOZvsY3xgkgIhAO3QG6bjXO/8mfOJPGFnkxskgvBrXSoEoMEgVAYRmHSW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.6b9bfc32.0_1628792613587_0.20709768135318418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.c89ecc63.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CpWowFHBsXto/q/le85bZAY9oVK5kedBIkgOubM7jntChE+PYdykmQDazfOOtHv3MExE9BD6RUe28IEMfWvUaA==","shasum":"9104ae4cb3d61cc87ada18c620e86ff220e82a35","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.c89ecc63.0.tgz","fileCount":16,"unpackedSize":415995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp1mCRA9TVsSAnZWagAA8SsP/35hYrUlEA7wGjbFT8DK\n/pIZ3BA9j0iksX1vXlVXtfafy3Nhkf2/diGX4cBMVdPrVIkdqxJVl6aFdnDH\nSeBH0Ii6N+3pHg3QwOH4TH7Z2ZAAMChC3gET4Q+eR45PpYdyVfqj6Fs1i5hA\nzxf/YXleiD0Qqy2Nqc8SiMJNcTvh8FrtaUnoznhKyBnYxVE6U3tfQBT5JMSn\np1OVbG3KhQoNjUs0VhZk0sDXqSaictHIf8oyU2wvECQaf2kBwERBY+3myrfp\ne1xLCSvzsBDHdct1C6TkvDyH7uX9I2/PuDmiLCshrOCt90yOIXVebJ5+H+Vk\nf6LbNsfbywm9e9fCpk9p9K6VUOYLjNcIU8EyLkCGtFm4XDd1eTvTzabrUElN\njk++BvgqWTMrWegIk0Qp07NuJSuJ75zuLkYESeO4kbvAGjW13LqTC956t6K0\nzYqXtg2ogqXET7r9623VMG84jIvIdGL1h16svFnrCzFiJXw2oSllSwavqzK9\nYxWXrYYf11jzB4eUhveXfrPkeQL+9L29cHDtdgCyD1jcTTm/VeUVLMUNz7v+\nDx1herJZTnc7HyaEk791DmWWM0j9VcvjzoF2qJDOY8S9cJTEoceTjiktDqxa\nrpWmNYthX+IXM8+mm18ofkg4gZnGX0NY+LgMGYGsx+v/JJ1VWL7RHhB3Rpxi\ngyk5\r\n=PoP6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrhaeS7i/jbynz+yWha1/nOmbzmng8q5SWxhHavq8HOAiAQwJ4JFb+8xbDDiQDxEyTr6QaenY9ROM9Q1XnrbNIFuA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.c89ecc63.0_1629134181822_0.5474739191959539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.59de86bd.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yD8dgnCvn1SqCl9jZgXX/2aVTe865lifEa39oiFN6n7XaX7mfoquO/2Z4x8fdlplhi4qoPyEepEFIZnQH6mipA==","shasum":"1e049ac159546cf933f7f0a006aac9d2a25c095c","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.59de86bd.0.tgz","fileCount":16,"unpackedSize":415995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGRpCRA9TVsSAnZWagAAzYkP/0C6X68cjs4B2oeIB8Pa\n9xuJ2YeU6/LWSDehIGdrzTwAWSaq4vW+ySoi8BvoY7z8FZZNRRqzOjTIHn8j\nDHOxBHRaaUQPENO8GNgD9GqrKpvFiXD1XF6lr7BND9khkX/XKP1s0YQW4lVD\na28y3T7EAfy6zFaqozGAlnEOtJJ42Ililm+xW8U5A5vbuoLy3nf3tpws6Wht\nc499hJhbrlx3/2usocHnvmXv9LQBCclsXyKrxr9BgZWxwWbN4YN8evWrBPkS\ni2XLqcUjdbQf7lTYAZ2CvWVky/eoaOe8/r2HrM0MAMc4pwrMXOUY6wy1/q9e\n3CkDG7p875e04uy3vTGWOAwwPIel5sNvaMbBPEwEo9U1pQFSNx2FwON3jNl/\nJ8VdwBvfOeSaxBwprDOx4t5Fa6Cky/tUofa8eFQvSRB90nrVDGoSAKnOjoJQ\nEYyc2TCGD94zWMwZSYxTXmfMZNdz5bv38zfK3CDSIpRxeEQvEUg7BdXauZE6\nFGfVtb2uqBFxfsGkcQ8+OweNFzPJXEcZYmXjH7soHOLPMnYh37JRKRnAhZPY\n4MjekG7LItN7xt4AVH7NY3VuYXY+x0LyEI81dNY8aN584+5rjDgvMUuRic/H\nmESt5gXrdEHsAcGsqaahUYOn/H3U5HPKxPkzb3eODK0tUXJMiZnl4CwitGp/\n9+Ug\r\n=L4bv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKTw0yu+qGxqzCJAIfaMAOvbjKJkdOz1wWyAfGFMs8UAiADI36fqGC0DmbMz+fHzNq3FEUkTfisF7l2YUVB53VLFg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.59de86bd.0_1629250665278_0.21213834459661052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.dcda879b.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XVnU9+qCgdlwOjEJQRX2MNjlerJSl+kJgMa6WakWmcyIehBZekytH+5wlVaccN5xDyKx2HeNqc4dyboPvONf4A==","shasum":"c5e21714fed7bba26c44ad9c6be3b5ef1a183827","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.dcda879b.0.tgz","fileCount":16,"unpackedSize":415995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYgxCRA9TVsSAnZWagAAPAwP/AjRr3+GdbBplXYFfBS1\nHQcBx53l5pbAgxw22I7G6UXuru9HSCXn5pq3yLbKHdh2oG/G/j1hlxSXJvE5\nAtc2FIv3c+o77Wq1tLUr2L8YPtOIhfiPry/iiZJtQ+usfbED2ngvEeYWWjWw\nYfnsw8mt7fpv5KXfpm1WegMCdFsOUfLaHMsHgrGGNiwVRrjBx3xN6W7D/9dq\ndCcedIYp/bZinGgpUpVgk2xX9yCPCljwlbRE6gafnxXc5EbCS4A08xqIAu6J\nB/rSlMVcTWduhSdauth+02T8W5M+5u/c5T+/yK1r8FfQJXR5EMF5XfjP5Yn7\ny9oE0Ieb8x+sfgmyA6NjNExCOn7+pP7w3Zc2OF46lDVdn8oGURZAQDwNsW3O\nXKVzcBuEh61liKoWhDqLlPySqwuRTxPVsDnK3nnqCG6lzMtP5HpVKmEZmTzm\nJTdmsqsRtYrMqHgMwSGNKJAHHJemwYwvxNCNDAvB3kCYUrkCf6JWhyjDKTS7\n3M4UfZnft6n8CNh2LKsoNCC4T6kmtihWm3fHCQtfn5TBCxYvOqWgaj8N5uBK\nN6iCvg+KmyH3ykFG470hKOC2zFvpq2AnX+Ixutr0rdHdPpynJ7fDrNdeoSij\nftfTAxNt9acTYEj9oAOLxyh42bRWrMGe28Bev48c1dloploIAb2g7Pqnsb6M\nXd8G\r\n=uWvy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLrCpsTioqIbp9toGkhMvndCnTvRapzjTzGqK1hLe8PQIgIylaUKBO3EeJCgfTDvVH+R8TyVGH8WGmb9ht6t1j4Ac="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.dcda879b.0_1629325360891_0.7656838841177358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.dbb8b366.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c6Rs3+5sAMIxp6R+A8/dcehIWGzI26Ktbd3bs+9WnZxYmS+2nZhBV6ox8M968RoyHH4F98sUMfdpgf0OLpEjtA==","shasum":"1916c05c771e9b10de692c8f67a0133a33783fc0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.dbb8b366.0.tgz","fileCount":16,"unpackedSize":415995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuJhCRA9TVsSAnZWagAAsoYP+QAKbAhpL/M64cMAeXDA\nFBr77SJd9aRmcab10XzdpM2Zu874S5+UN6g17T/Vbv5uxIhBLDfcLnpQxUMs\n7l3BGrJ9ZqlhW4Uyyj8xaJxNlr0DiJNlwv/ttRBQuCO5VxJPuvF60vDEeYhV\nb/10HHaQGUUlIXrkNEOj4ZA14jSOREQXPqGqy8L2opQtaU5FgCyLJkHb6eBd\nHEraz4H2TS17g/XukvuYDkRgzPMlcsCx6yISxYBISNxIp/s4b4m8QY0Xcbzc\n+yLyqIrCpA0E4h62LcbD0HxVWK1kZR6xjRDHkqyAJxFWKbQ5lJ1h9iujUYPd\nY2E2Y0qAuydUGdpd7VEFb+mHjDzVG7H1HgGxHt3sKziHxR+04K1xWKHA7o/C\nEydCdQsJHQhkaV9ULHXxrSs63f/S2M31tDvhgx3+KKl/1fhwoA/Phm7vnBaA\nyEQhKlPsir47ExZM1K3/itwtsQg4RkLg982yGQYq2mGi/8CvfvG/x611E56d\nfFUyItCaQX5iyHpulrmV8fbe8pY15Mk0tzhkuSO2YkbIcf4S4s8Deutlj5Br\n7hG1d5/4H8g5JIOgtxd+IHtcsByDsbUoP6uhsIW+Lc2YAjTtRZxIMj6PI0kF\n9CasOUtBNR+PrExh9vgHgFZKmMwLRnB1dQgyLS4vPEIJgWHRe8HIJj/NeoF3\nA4Kq\r\n=TUmW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBrUGlcl5DRlR9KaGgxlDtYC9IzI2PMZWswYBPsVjwRlAiEAgEJV/C6FZ6T1MINggTCdjiQik80mCmJT5/gTVvpGlPg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.dbb8b366.0_1629413985564_0.3981102409612931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.c6e3060c.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NsQTJmDjw8Z8/tbL7vJW3cIOI2gr9NfkWOra1IRL54TGEGA/7RpS3hGp/LVkua5qPFOhgU5Kk4BGyHxjxMv4VQ==","shasum":"6d21e5dd8a9c9ea85115a731138bb3a25ca63bfe","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.c6e3060c.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuLOCRA9TVsSAnZWagAA/WoP/3z9MXi28zIvj5snU6BS\nbci77kAI+4sbU4OUuj7Fk1masFfF/NibQoqRsudW6S7YRYaAL46wWOdQnhfk\nvIpLPmGDPToOIhGUgV2i8/9hN7FXjFt4wBrAyEbfaiIkKpXLveXOFRBKWxt/\nNRdicJ2y+6aZoFxyXK45qyQqA5j6xT/w4eI9xIDux35zcGSriW2B+HPxdOKA\n/UADuXq9VewWStvb5spuA0NEIVVkQ8B3OQWDCyZ3WBGVsie5WPwYOsS4cDBV\nAJURUnx6Y8YKq6JyKSKc+SLBBDET6bROGiXfk3srZS3qPrXkKij5cnCy0qhP\nELfx+exBaew0aCvdPL/V3wEu+KDVfAG/SltQyn6yhaS8NI7U8oCr+dk2LhoN\neDBkq6etaiCmJhMvaZsuF6++fbJ5w4YLLQzfvRwEpsQfkln64eRz8lqUOig1\nWy6uA8wiBPwsD3+vu435V/ZylBSOQ6B7BsZhVOJt9jyVOG9wppZlUE5GcxKA\nm82b5n1aubIW0FgBry/4Zo71xex8XKZVaR9prbiwXcRle1xiPphti507qoBZ\n/1jj8l773NWh4IcjC0xJN8huXjfBPqZRwny2fCMbP09P5dbQghNIAfKoT8Qh\nc5/YGc4mrlHcTqTiPprgEJTLn+I8C6uiWIiDiJ5iNMVP1poG9JeNEah+VbR3\ngDiM\r\n=W3mu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbMl8QnYkjAJPpRAfkHPVi2HCQKbFavKOXxavOBaJ9JgIgAwBcOUX7060PdvFSZDse3ygHpAXEFwAqaVGzBxFSu2g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.c6e3060c.0_1629414094338_0.3104612982275188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.03120b7d.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LMlVYSGqZ0eg+XjGeBrRguElIeK9KueeWEMznilsTZ9TuYJvKeOLGnGv3S67zuhQvF11bgyTMCJE5pY99LlsAA==","shasum":"d745d9fd279a8059295f7867fe022bd0adc4444e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.03120b7d.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHva/CRA9TVsSAnZWagAAepUQAJ/dCosB/74iEutVqml+\nrb51SHXfUtfI7s7KcPm+LQPgeXZvoEIaVQe+bwmh0JQjRPCrpCYy4WySbney\nebeO+A7vvSsRuL7ko3Yc7PvyKJCh/fK/u7qlgf6q0zoF+r9VjEk8sCUcNQq8\nVr3CnfifK/fOzJKE30OMnfqygjoQKCmIqJV08z3lja9FCD4QyPJTiWN1rUIu\njqvZlb4azu+MwYMOfgF0EEV7wUARfV+f26rCjnZKl2e6N5OgpGFwkp3Txptw\nXWbMoQxxqr58ZNHUdwfLx4ebqoJHb9C4NNNebzwnjLWevVh9DSrFpAJTZ/tF\n5tvSe3gkq3OjNCagQTUn4jbtIWQw3DWWGigbZwkMowovFGgmLemkWWwDoQNb\nLhbj+t8CiafY4WkJNpZU2fsV4kMMatgb3FQoeEWnJO2MBPlYWi9qUDYbNXf3\nYwcGy6o9oNbTVQ/RFBJ+z2MsoVHQVPsuKc9dv5wKcCt75p4wdmYysJIGzZ70\njuXC/0CxfgM0zgZm4wpv58NE68y3o5zIuivGLH+GGKrCaCa+2JtzulEAU79x\n53Uu20MbRly0mTuW/04HKQPY7h/RTzcHBc7XGQKMBUzairSNlJwH9ATFN1CB\nb+HKZwp1ulJr+F3raPHvV9Ev+x79YcG12uohGkiwg37MDfKLEyD0YRCO5nww\nGb/y\r\n=jmj5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGov8oB8bTM110olghPNR/TUBQC1bCdTL0bHWU7sY4PnAiEA25gFEGCZqT4UG5xPxtsVxRk1LH4YNUDO8R8iFxRaRtM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.03120b7d.0_1629419198967_0.25807501822305534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.d75a5f74.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6W/e8ggteydBuhO72NiXTPJQdmjWPZhEGbJMyoFsi2alVLEbXo7pEKsWpM/0oT37V1pwRVhQJPm+VSlru0qHDQ==","shasum":"d62a649301e47241d01758ee79e3703ad9eb8d03","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.d75a5f74.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH1/3CRA9TVsSAnZWagAAjrMP/3Ml8jae647cXJbPLtzm\nRSI8kuJBpnWhRysYy1vUnvKTtqo8+sEm/NmiAoBQJLY7kUdISrRpyYvTGtPK\nCOQtW6Gsx0YSTL8J3UpuMrLs46Q7c+nNcPGYlqAg9+w/kvCyFMTAaskz3yiq\nTMnWMxJmIpFPLD241mXGdYPDa32wT+wp+1Kcg8WcvagYOQWLfnhUCB7IOSRr\nwogx04+dlOCVWQEqkOgTthnhUT26N8Mgn6UN5BI47M42G0CUrfPxQHV5fLmu\nSAEQeft/4aeQCBh3tdVEN9ONhiJqtdvAuH6fJYu7UHSpAVfP0QjXiSgMD5BU\nwo5qeS8D+WwRMOr6QrCwh2F5+GWZE7MbugWGHH8cBSKwjCUB8wRPz+i7K2SI\n3RuYmbSAiHVzt4FhyJ1VZy7iCZ+usND7pvbo+Ukd4wMCStKd/qw6i7jS/jdB\naKcDe1EYGpG7OuNP7jQsNPTeXWFZ5XlYO4rKvWia0cYGSD0Km8S4DwLwfqFI\nN9MMQiKKYPGZ0pmRoGIharnOmnAKY2ElvjsTCAhjmiBKwayEgNl/DqOM52fp\ni8B9XFlGI2ajK4HCAwrHIkKsv+oCvwzq6+9sjHRkWMvjnF4YNQjlGNYVrtyW\nwoKCBMLvnIqKWGqjH5zv93wOvrY1mzifpe4cmzjmgNgvhVIfuPKt7ApSmORp\nLs2S\r\n=Ydb7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs6Bw021ulp/QurbKQVzuamIPxIBezz/kGNJtEuDN1nQIhAI8DTEtDZmdrSFovxvxw9rLAqlUbhdeoX057XHi4b4CF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.d75a5f74.0_1629446134948_0.2409401562081004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.3d79ffe7.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KYEqgEqfcbXmGQPTiN9o7iVvrARW44KC1m3rIonsz8zp8ZwVpBXDx0xEFQwgICrytWDuk59AZLbCCkZ+wJGAdg==","shasum":"cdf9a340f6136de17ec33a546b0d9eee303d2914","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.3d79ffe7.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+RyCRA9TVsSAnZWagAAJ3QP/irYhUVis7td3mMs8hjg\ngVhfYtbaUKIGdyfmK0H3UEIm/ro41DBIR0pmYX5SBeXwnbgetTrUVq5HesAr\nBq3siWvkHgQSorfbAgaCaQqi5bG8FrwerPEZhM1choI3EcMlV+SdZpFZLF4A\n+KghpCe5pVVKthwFUi0W3+1oZFkiDcf+DRbosJ+5ouVw/84+dQZyW6CIkz0L\nTTVhtdopew45eoN1Pl4+X/0+3bTJh5S99XF542qUaY9vzMvrKB+huwWZkwGt\nTTaTkim55XutxZsT3KFrcxV7+v9Ic32TeqxevNk3KEPAWJGS1jrNN0iT6DYZ\noEf3z4k020mizYyHdvxqcePXyolGqaiWnk4/HApXx1mZZLNuVQmXPsURymc0\n1W4J5rWN3qDFZmSrFeLxO3apwEqOhP5fBby8TD2yXxadagLjxY1uIENW7g1h\nFvanRbyPlCM1p+NkY4eefcR0XVkrrGst0UX4HSGyGV3hMplWQoSt9pbTewdh\npiJMR/u0LpiS5tep23/ZGke868Epu9IUSamQyvLy7VZtEPOhxY+nfP3gjCkJ\ndpjjR6ookuX6a1fA6NcBRyJNgp4R5ZlDBQTTXTQDDeLNKWFLOJ4qwDrScsTZ\nZUtNkvVvE8DpaVn+cnBinjwbFpP0TOMthm3Fb3ZsWUzA2X8flPqdi9r8hmyM\nLNCz\r\n=qJaB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGocN3eIcfkcdZkj0ha8Vd9ksn/ELOVa3FHY4sNDTsa9AiA6fiwz/qXN4H6UtlrV9q5CuNvcDwk7P9TmoVa2T1boVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.3d79ffe7.0_1629480050498_0.5743557244469666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.02213ebe.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jdDgGtwsoeunJ1dYuzlHqWHFeiKnRV1Bu2ZslhD+ZsWVq2Rh94QbPuQqoqAjPwWElQ53Ax9HME47yn5wDisjqg==","shasum":"0041bdb5f42d348fbb37d02c9f8f22b612bf091e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.02213ebe.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+WOCRA9TVsSAnZWagAA6CgP/RaJde7N5r9gVBEoVz6H\ncoggiBSzTxV9Y9ftyRl4ID2xjQlxOfXGSgGguhhiCvjx51M1IWKboSeDRFK+\nDIcuY9JmP/DqQerhQJPUhlogsEryPvHWqceF/W7YhoNUNqRzhIamXek2QwaL\n6AxMs2CqSY59sHYOY3o6QSVDlQbhGLjvM8gU65PKMCVGGmGulaiHbVC/w0lH\nlf7LG7hML2X2AuQTTfGQ8Hf5t4GWz3j7MOaE4r9z6E4vjGGyHCqSgDIyLuah\nmhMPHxYbjnyryQbEAPs8od/7f3oGjhASm3knuBaAiffqYX/TbyCEofKGh/UF\nqIG4t1FEqlhDzrA2LkbfbRkMIB3Yq3xDWvqL3WCL7txD1Y04mIVWhkmAg4cQ\nKjoGN/WroLVOHYKup21lJAvyHdOTDVqj1lDZoETBrcOFPVjQM+fLZ6Ep5Mwq\nL1IT90gU2qQKkGRw84EChieF1qHhAEcHSmBeDyZP2oD9Zkxi4jm4LzLvmrTp\naYy3BMEKVzsffNxazzJDqO+nWbTtbBgE7p6JdAOGDLQqevcXqU4VlZFXtCNi\neo5uww9AHlJ/JhnFOywkdQVWCDAf0dl3t6fGqCm7IqDtaaPCmaqza9y0O5J/\njpNaezh02xvqjtI+RFziAgFzu6UZLwk8TMAkJe838dEdQfbeTeXod6IJ3pOu\nPj6w\r\n=XZ3X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTyu55K/yNKUoAZbhbwLmKsZzjJNAa4F7CIJpTC6nt/AiBEKQ85c9Y0CSARJrh4QWKu4msngrwUfiEDWnm8xis1qQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.02213ebe.0_1629480333915_0.026870388037790516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.90a999b9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-to8T8hBcSmEr6b0QGbsudv9cTpJ3thZ7W6xb913Dklq8YUEGbZRm33Y0X47fWBg2Wug8/0+nTYNSKIwWlW9Z/g==","shasum":"0807d7baf8358adeea4e0986d04b31f6e7d1f702","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.90a999b9.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/d8CRA9TVsSAnZWagAAVIIP/R49xh6Zti8/W5nEkhLG\nsKuIeeKx9rCYxx7xa87mvjyc21ltFnnftdR7/OvBEqPulR1MrHdAETrAt22/\nnPlIH4R4gF0RlmdIG4WRLPEt21JbJSt95SWL1Okb+TJwgSGqhhjLQXKpk735\n5GSsdeWoFgjJJdMjhyluVebHrdmI+6odOCJO9Eg9w6+KrjjY+QhD8zOTAZLi\nMUH9J2E6XBw6+jZ0a2p4kpFE4O1LZR9yp+ieZP9rlwqVSiqQzT3NEG+1i/xJ\n6D5tXqdHukPE466fmw7ANBt2V/uQr8ixp4kAJqPha5la/A5bkVw+UdeLSF6C\na1x02VEgyuwch2NjnJQ23PpnJpEvj0iT8jbbYJFmesXFUOm7yDeRNcigrKjr\nojkt7SyzC4NHTiFWiREJtIaWkZxZlQnOraawu3lGfeGIsBgTUYQDJ2oUmFXH\nfIVCIAWLdVQkPNGRqI72nhx38o3467bSWRsEmayPOYlTbINuA7ibnJTP0VCY\nJJqelCYBWKLX1ZxhKQo0sTNM01gpEOvbGyGK+fcCazauLldUMHAkxeyFaekA\nF4kh9PkqSNegjjZlYuMGLwTVsfqqgHNMIVU+9YFe4m79ETgfJpJdcapme71h\n8o1BjQHLKSToD9HTwnhkQvLsa2pAufDqkEdh0XgFKOj7BWpcREIendilcPOH\nRkDe\r\n=82AQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdO4HdbJ9ZcPFDCfmIcunolKS8ax8QMAIiD4t+ciLO3AiEAjSZyn43niO5JJgQmOwLks8RXwwq1gvNQ9r3SD2qIpF4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.90a999b9.0_1629484924610_0.9545950189563823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.6db58716.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bPZuQMrxM3al56FYqL2VFvvv6kCP7ORHptan3dLR5s03QflDI6Brih7SGRfDwmhzi9Fy1FbvypblX3fIgNDj+Q==","shasum":"9fc534837931752496c5a7d72589470681dad755","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.6db58716.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2U1CRA9TVsSAnZWagAA6SgP/RVH2wccRPo16Uve4D0S\nZJxPULFvdpzqqjEMqdqrR6tGGn+UmhY1El1JDa1GIFuASPjkTtFCmIrGgUce\nGgsZ7QRjZX4DQ9f2y1/kBTZhOYGDH4Gg7maY1KjztJKSlbkigeefUUKCvDAz\nH4Yt0K3WRDz3PppdCylQV3+Ja7136EBZWnMaz5fsPvsQN/nHW79eaPCZmZmE\nWCzj5hA7wNhODfDwkoptVWxKFaTrRG1LuJrFWeLSslLmo136xgFdESBQ5iD+\nVk/N3re+Do2BWGHSfMFFwGE7MoMM8XMEaYcRGSf5t3BC9AHUX5Gw36pXWyjT\nTuXQ30NH0cskJ/SUERkLYaNK4edLOpGgjrdzBOC6CWXcYYkjTEIKcJcHctqh\nkl7V5DJRYBwT1/SyfZRJU7KjsL3i1qgaaFNZzhCf9a3BFtwseF7/2BRk0CfF\ndgjt2xlMl7j//g9jYVqnq6ebBevKq82rp3Pf459QjgkHMlg9QWLraBDSRu9F\n0YouG3fBfCzMiEZ8MeTgkPWFeeCEW/ulEAOlc6HLa3b5oCyNNXXxnT9YY1Z7\n6Y1khSKH2NEORQtOqe0qXh7F3mdTih3gEjgxqP6+TRUdhl870yinov2fPmXb\nz4WehclTBiaKYxqmkSODe9T+zzbFnYpsdVXi0Jr8+c0KHrNwk7aTo2sAxO4U\nYIm7\r\n=EUiC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFd7bMKUc5ZINsxS/ZUSUTn7G+Z8uFr1JVvgLAkuIwe4AiEAqCtIQ+js1q7hD38eIMlsYLFIjmvhd/cenKD1+Y1jVSQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.6db58716.0_1629709621408_0.2889777600250809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.9fb5bc35.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1ViN2NxElq6x+WqpfcHMBYvIXCRi0olpIvIcxeWuXqwTQ+21uIdU7ShGgX7nyuHiTnGWS42JkizAYjx0rAMtKQ==","shasum":"e75c121d3aa94425d8e14097fd3f63d9770ee29a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.9fb5bc35.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCX6CRA9TVsSAnZWagAA8gcP/3Ii+6hvTjTneZyl3mdb\nKfhLxqX9fJ6cyjVAlzx/Oqg3gWgown1tQBXigGRILWACYzUqU0hRsT24fPd+\nnrtLNvFRcH4bNU880QPQ8omlgMnJ1AIzZcZfTawsv+WBhpgwO7bontGt3yXc\nvrMBcsoRzDFEuLdLlyCK5UljG0TyrurTnov3TS4xv0Wny959Qu49jquczEiL\nyIjq5ZTSYGX6a+H60enkgzMMuXunF6FWM8vg4FxsIqaXmVgmi70RKdt9DKoR\nk8ymcctPdtNXDrZI2cO0xBSgaCs5ojFFFDcaQtBdUEhXKKPTVbzjCt+d1JXZ\nSMk2IZRU9N+3tSJTiPf9W1yCrUWcpq3HJgcqO+gadkIc+7HXxT7fv+ehCq08\nIVUuCkSKXNrW89SDtsuWilAKkJokjaT1iV0unDGadSgKFQGnwEJnMnpDbPEx\n1FZME8++Bll6wV/iKEf7cwrXuuxCOjVzsTIYLM81gwRTrlituaUx6r/8DcWZ\np+ENXW1OnXiM60GAJZRrd+ujisJLmvKncLeLy6qT0mv9mJt5fjdEk454qCDC\n9fSxruhi7++RBDacrWa80vHnJZ/vMndZwl4Sy/OBZDyrE1IMJYekPdbUfvfQ\nLFy00sk0IiGaKxpyUdUzwCxRtM2QaGiLdD1rjlrBjU6vVAExZ6mSASk+Miz2\nG5am\r\n=X7z1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVjPF5FL8ikniSFxqMfyRX+86ViQXx8F6Q1ACtYNHDjAiEAkRc0erlSASnxPTMgkgtaylbD2R3m2yVTpDEdny9Ta1A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.9fb5bc35.0_1629758970285_0.2597356240120703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.ddaa5d8e.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CV1qSuh+SIGZcS0FUZ0ezs9rMrjgINovqYeoodzzU5GlEhheHPKPH/blia2D9hFfi0Mit2EV+pgU0FDQl856qg==","shasum":"32b0c91412413be80e105ec18cb4f27797b8b6c4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT8nCRA9TVsSAnZWagAAtWkP/RqorIis5fCO8/x6ozhW\nK1HZ5lj5kzhe5ozQMToRcumcki2TsgRtMz06IJALQIY/d5pS7WKTKY/8PShv\n3AHOH+dTukLRlQnxeHT6G8LaqMvd9wv059QftTPzlp0E0NwoUcQpvJA0u09Z\n1hvmrwU1TrAtDoma9J6tuOgv72PzMavi+YaZvWNYx3eEuSMCfTRQo4yfzPpt\nQBPQDhZDcbL336XfT/1edJOuEC30VefI+hZC2KzJFWaWmSEKp2F3+6JW2mm7\nJcMoAOCI6wS3YQT8srcKfS+UT6JZVec0lc7uXnyDmyYCapA+53289YtV66eO\nzgd0zoLeUMoEUO43Cgi89v1zgZry448gIN5vnKUWbZT49s/rgzYuK0K4JwLO\nwqQ71pLFLcvAqZuZD9Yp3spLvgmB3IC6Orrymcop3S9I4njFrnFghTi1rjND\n4+UyScNoWfYBuJtEpIpC+xAlyRJJ0aPvkAFSu61WLOmKhbc9g9zRRG9PH8eU\nyRHJ2F7FUpFShft/x2AKB5Vdbi4kICUlQXpzdDXuKgonAXiOWA7A/yl2hpvX\nmp5EqwBoDu88mZmZ2CLByhYNNH0q47Lb6fdpLtsqFlOGKo1/hK5rs5KDL2Yy\n+Ap1YDT6wFpML5OmwP8dfzuYk1v7bOD3kxiSSwtE2BIqSxMswS7nqCEKQ0/D\n0vOL\r\n=SYiK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8x0yJzqu2FETk9SVCkujarcra7oJhGhGsQCeogz+tMQIgPPch4Kydy5vamEx0v0GpS4C3eXE6i8i1wLWNw5ZR1fM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.ddaa5d8e.0_1629830951398_0.3576536577865226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.756208fb.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qzzU0Mq392EiXNk/ox9xarmyKH12L8KGBOiz2D3aAHRoMHjRNpooUP2kP46lGP+QBE38w9KAg113gklgqa90Ew==","shasum":"0aec4e06947d6bd84a1d168bb5100198246c19a6","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.756208fb.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp7oCRA9TVsSAnZWagAAQ48P/3BrtB5zFc4jTD/LGAmC\nWdmW79MX2Fguh+cz9s6wKMXd5pSkTkLm3kQrg9WdMJuIw5/2RKNgY/UZqWv7\n1I6JOax606K1k0YJQcfKMBdE5sNu0SyyWF7XGsZukSF1Q31dIvbX9csRHk6R\nhxYIv8u4uMrsHbfm4Mi5Bmim41Mb/T+VXaXPqR0AGv5bJtqamFItC+wFyHS+\n+zwnrj5dom8M7RDcJzw1atWzMGx+S1Hxtjr23K5KV8D9tS/iPsnBZJJ8gOXc\nMzLLI4zLdM8fnOiC4WeMs7dp7txN1x/x81Gf3FDUTm7AxNQqMqB3X6I1vrIW\nRN2C7Yq04J+OslJ/2sLysiKgTWWnlN6iVXyVHv94nvz0sKeyqxIrRyA+XZi1\ntNO/AJcIHnIP+wUgZ48FoA2vZH6EebtsLGKxSFqyFOdfLPuRzOukFCrWnpV0\nG1+ip5OPmuGqgr7OZXRT4MQHcaAhZeaCkbLcfldO+7Amc0mSjwWZzWf7r/IZ\nbRPzCPjMV8w5I6h7YYpYE9idcSXEBG7Tvmmn3OuRZMO/zWlNvJ13VqDYn4Vt\n0IA7OGJOYhFlJGpjV8HzWCdZcIXLgyHLvD2UbHwjdiO4N533rV+BHYsGoqXU\nGrN02ws8TlytbnTNfHhH0KagwqZin7VOYSdKiykkV2iJmvKnQEUAtb++coWJ\n0w/r\r\n=/Q8E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZpQpRH0js4yYSdAIb9P0F/Qo8zYQfTGA65R/e7kd5qAiEAvJEN9dhtmGDd13+itH34H84yT/VKUR7rqb78t1eVmqY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.756208fb.0_1629921000585_0.507306009613119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.9576dcd9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p5Yf88ntt/b+5fu+OpALDVzHnMEqBwwKw26SoJEpvRExe52CZmWTZBIYARw7cZa0ovgU3mHARrArTselsWnVHQ==","shasum":"3ed575d49d5def3595ea3259f9c72980dcdf5f98","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.9576dcd9.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrl8CRA9TVsSAnZWagAAMSkP/RZDyyxQG+CwuJPeU4Co\nQdhR3oXkJHqLaqcJwxzFvlFZUp1z2yo7x5LcxfTttiqepiU9mYylqozrWL/y\nkFRBOKVh27gNZ7EEbq8Gree3QavOvs95MQ3K4ag/blwRwBrwlxVK7P8P7650\ntX7sW6ItOXC7K6oYzJ78pXQuTbsEe6Gphj4ijkRVPIQcxLXxWml/sW62glFG\nBGpA0bBGeeH1bfUhZwSvzuudJ6kPkjzHvJmXIVJ+sVZ8T2ppFN/6Es/8dMJu\nAMduiWrjFBEjgd77kuknUbHZNbBKPZN0aS9IgaKp5vAYu+JoZFkSp8vOEwhA\nay6ssB8m3+IkqyWaGd1qD0wO9d4v+4QVom6+ifb1Xmq+BczMQ2n5LHwdyNhj\ntjJXLTJQrmXaLeXITcqt24l8ioBcGte0RXBl6jPlD9YfsRZM2hxeNsKfjSlH\nIIw7g51blmj7DEEdB8zmPcVjiJfztIHPtgtcJfhVBfrKOZYHs9xsxFDakAMq\nfLUgtCl1FhB679q3/DWhuZGj+ZysDeOoGLH2JPitTC+fskg+GU0XL5Wqfe+8\nEuyHYR03axJhUPIOiA6kBivHIK2hJwiocsDA7mxEUykNvuoBzim4Xdn8cpJ/\nQ5YziWlp6vAoZtGgDDIdEegqXjZk1iYLR/7lxh3NORMeUILO5LcUsD5O8jNI\ny/xz\r\n=bRcf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwod8Lu3A/Z8QUnjTT9RMV3rUeSUODSWiw3+ZTkI61AAIhAKcPNu1mfjGms6F/AWK20qJewlB+vqGpXOkbfHEwDHdz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.9576dcd9.0_1629927804401_0.7486606735716246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.7531cf97.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9Sn+VGuT+CkNauVNXwaq7qXqbyey6qZb3tBzVBAUPrXV65E083cbltorTIUXWw94X3XxG9fkjEPI8TP789rMpw==","shasum":"15976fcec7360dd7dad71b13f71de54664826faf","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.7531cf97.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ86OCRA9TVsSAnZWagAA6KQP/RaQX9VljoOKf9eZQCes\n9RCwwc1Su7d7LefeYmEMwTf2gHcusc6NiApkL6xFOTycyHuY1IFeIuq/0+JQ\nnVroeBy80COGZm/ydDPM+BgHima0q+e7YZk1ry7TyIKDBPre0/L+Hp5OIq1a\nYoR9wiFvwKD9uBCWzVzj0nxxtBGF3qghe4/V3Qj6ibNXxo7wnTeDeC1HpNkP\nCrL2tP5rZpzCK4VNLmrvaNsyqp36zfSLyDGmCrYobUxOJzzcS5KaRbgAr/lI\n+mznYEkHYfWBB9LEEn1V+5mHaKh479O0TGuyVtSn+0aunOjTkYQO4UYdEwKO\n/hatYfsDyqkg2/Ucp0r56dcS46fJCiMibx7Oia3HOY55iPBv9GqeYWbBWlJA\nZC0z9sVBtYGP9/FjSXIFk8Z0ZgORZHKXmMvYPlIkunBXs8anG3is0fg1YsOk\nrn3atcON3uMqmReLDW7ijBx/8RCnuMCpq4Vt6t7qo8gHamNK5LF1+nNoOQPE\nGkh9getA2XegO+AQrrdizBZeyLMb+gxb+jiLynZW+Ks0g3q8qwcvnc7AGLtf\nBB/fpwsk71KBrfClKT+Paa1kHRDMSuR/LZY8cLvgMikn5d59w7VwbQ/Icveh\nXQiGTNgaxWWgvMwyb3nRfJSMUJEnUylvPO2fw+LKm7pRp/Z2CZLKNA+gxa2G\n2xtJ\r\n=6fFz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClk5uSkcdBxicvPNGYbQzyFXxi7MQmZjmRL3EgVniEvwIgcqa1oKd2am2m6z45zYCewyHTpFJs1m8dz1LymnHpwwM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.7531cf97.0_1629998734213_0.8764759732095928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.3bab26b4.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7RxHUhU/ocUzd8SVFw6z2/4pclx9c5UH088qBJ0nHWs9dpmALr3EQYR8NssaYapCHFwjSOCkBWtcDLTDzHov2A==","shasum":"e2441bcdebc9c499dc52c5fa6e173108893dd9e4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.3bab26b4.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAsxCRA9TVsSAnZWagAAM1QP/irL+qeCZfqequ3YXLiz\nKxyPdi5WoVKrQstYxIQfVXIFsIwzKqbHX/NmepnQIK+2JlhBtcyNHk0eW2V6\nWFxh/VAupydaQOtrO1eqPOa9e4LfDYufNzG88WrfNLPsp98ztVQmR83YxTDn\nYj2lKRuoITP8rVn8DCEzDG+tKv4Ly+qTRxw/hCTN8yLGWhs58+MuGwxNQ+Su\nRYtnz89+GTQek6CFeJ294j0slGcn8DdU45JoBxHnGPUGFqYY2B9U9UmrtU9x\nvQUwkO2baxJAyuH2CYEAH3sUtsTlG3XF6FvnN4vujoMI+r2yQ9sM/zDONqqW\nmrTSF3sqO+Fkfiw31rz6seoW2m8m44a3Tne6N9+VFDxPLsUk0G54eNuldsL9\n+UMKl/YCKS/qzgvs5VDPh81q/3WXHXwUuRpUhnfNgn6xaqEmYCuL0ArRRyxn\npOe0v2Zkgm/1b8q/1+7DHqGDc+LHip+HTBcv25N869NPvX4znDRMxolVxof4\nfBH+XCd/hE5bic6jsOCORTx3kt58Fl/MGVAQguWnVybJvHzfXybpvTzS9nTI\nbLFP4UFJFBOBtGR+nha8JkWtYqS4J9LupdaioIKmPSiNSgtx64IPJUXCfgrq\nAwXau94+4bdYK20Cz2JtJi6IUPGqBZLgyT7Xp4LEaMTpAho1wQMxl3P9trVS\nluC5\r\n=YTcP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC81R1xiuaFG6/+BlEjWDSwy75kpluCmRQIddvslRhwtAIgPvyq4P7v2NW+h3ODwMq5irJerEyJt9Lxt2IloHK535w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.3bab26b4.0_1630014256921_0.017045793166281076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.fab48bee.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C87Q3uX8dPDwlsyrv2TeOliBfcqDvBn0ldOmOfkRdA7aDd54F/Pdf4g2CQODe5q1pm1Yt70WP6GV+g4bkXBaYA==","shasum":"e09de982da25dfc55117a4b229ddcb3c597fdf77","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.fab48bee.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBCMCRA9TVsSAnZWagAALPEP+wUGkzeqEXvaPFrxyrN9\nSXaYLs3wwpIPgR5UqKGV6pvg4DCsbWN5sN7AMhawptKiKMTOCMghih3sKfYg\nJPx5WmVURH5s3xe0PyEbJXu26TMyZFeusBitq9QjpfDSYs2QbgOM38k56Pnb\nA7QZ/M5VY+1VWL/xqD0RKdYvA2dO0Yt7482nBBA2+ZoGHaByVfw9SgeF5cua\nV03F7S3+UG0ehgrWebK+2nDksxCYAaLtjdGLr7SD81yFi9EG5toW3lkVsVG5\nkOT7nkzoD+yq81b2aP4EyRiacTKxW+B1MiwVapnnHvceXHemGgF6Oumalci3\nsv74RhZpdomyvDLsAh18Q2zkJh1lykJOS8IhUCFAAWdzrXPIicLMQaJno3jE\ngCK9tRiaSkNGckmoFdKg2ossU29R5WeFWEgkbMAhfNXuNuBjc5WZiPP7HGZS\nbNP14pNK98DYjlR9PRTV/1PIaFF9JiFh0Y6LsTU0D8LUVjnukMksZJ3rn7aN\nM9EUsvRXsGjNN6MmMsXux6e2zFAagG1Q2LwqAcsXGDWjP+INYPUE2SHePlPV\nQYKb77lQ9Nt4BxtXgZCi0Gx6+dFpQPSYLe3BQxANzYXA4/Q6saAQF7CD2HTB\nj+1bk+ppcOkA/k5i9QJYxznfC03qAN9clzaJDIel4COYcc6mczLZraJA0xBZ\nIiSL\r\n=TRw6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDE+V+9qqqASQoSrtWnX7PXiNjQI3jxdd+xbomQndyCQIhAPCoP9O+0giLVAwWle6judX4MQjHe+o0gNy0IiK5b+rp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.fab48bee.0_1630015628246_0.17985939356782787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.dec18df7.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-POpQNQv1uyjmBNmIzOotKZPC6F9lhkZ6qINhvqABUw/DpkH8nEKkT8W1tcMeQyRxPZKd6a7rYdmNADm1Ve2S4g==","shasum":"7c8b78202d9bed783f22d094a08992665332c5ca","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.dec18df7.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJacCRA9TVsSAnZWagAAbz8P/iN966+hnt+L0MpModmo\nVrOleZJUHuuo6Yg40NoAUoI9u/QKZKeSVgrVG906GOraR0YL1rWrIYvixOe6\nBv1JXKld61X5BPp5VxRnz7web8SazxqPhUiK9Oc9Et58xcohkr/tUh2BoSYd\nxOlntGpaajYcCeTC0lAksQQkVZ+gNTmpMquwRqm+xz4pDL0HoYNH6jb5I9fZ\noDInkD2DG7/UsruptxxQCimaJjLTgDXt9VCUQ2chqlGJ9o0cH8SuFmjncgK/\nHbtlXO+gHUJlLK7MDsCTX6on1iScCJ7oNH7FzAsyKtwf4EBAPa2oOWjNdMcE\nTC6XwPsbCmaNfbh1qfhnAmFGEhuOhAXO0+vN9CxatZKFieeFDrHK1pzKixop\ngqNOWB550PUFdFz8ZtEBz8TFSPMqkXbyp5ymFDqc9HpLB9l5Eg1FnWgBkcEv\nEdlL00xUbjGTTIvvCJKgAGiRuBpcX1bOHc7EquG3UyVeDsvruJPokc0thXWa\nM82gbYhjTQxrLKXXXTYwjsSPS+KPyjeFFRcndQ/I99PYJrM96AGWEYoC5ooy\nmIehFglVKqBFmWH7i0ng6V1wYTU15e31VmCzRJOROycgOF5Iek1sW0JS3xLQ\nzVv6Xk/3kZEUwRuSYfAuKc/aOX6juX0Retp1ys56CVgnS3CuaM1rnKicCU9/\ncspe\r\n=r8iE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEgyy7C/v9054j47Amf4Gm5VQMA9/8JhReFQ/LA8Nc3AiEA6iUREdL5SYAVPnIGqDSom79rY1ZbRqowvHmYzKVzbfo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.dec18df7.0_1630312091891_0.9639402311856518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.61fe5b17.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0l1ST9Y/YO16LZGi8HqgglPKEjBcMEyJQA0zNJLCqtT67E5iQWuMZ8MVHPJdBSFf1MQHTi7V1c8GjOt8focBCw==","shasum":"a57c7498790feef2e9ff5c712b300df70f1cc06e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.61fe5b17.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFHCRA9TVsSAnZWagAA1uMP/1X8eVwTkXS1lC7fk2Hb\n48h791QH2WLvbQ7tc6LsLFmF9w1dkVk9Vzms1pEuFM41K/brZv+sO2Cx5M4o\nnQ+QQzNe5HeOrUSfmP3nWn4n5M42i862dHUPgBKmXeaQO9NKHV4gGuZuPJT1\n+LoQzAI1tYGf6/+QGyCRVULAMg7S3rEszFKuhHVZdu1OtRhtI0p0fv+nn6a5\nj1mDaxRxAYJJ/B7gR9xF7s3VgKCx+68t1pFqmILyjrFHdk6aXZyBNQP1uv7R\nKJteMNQD1EdfBC112w9PuI3yELtIGGC33eyN8GKBWbNZKsLwhnZC/P082ZjE\n4gaY6xTPQPWrDXSPy5PEG80i2aFFj8Dt8x2sZIowxK6vLnjdSQOw3OYE5Rkc\nD6PhR2IuQp0nm4tX/ijrLuqz+FAYw4j5ygi8dhMh0bggTVYOaun9C7cSkkxT\nBiN+xZq89YPSUEBhawPoxeEgXhl1twyh2I1TxJeFQ/HwYpAJ9RSEXYvct6Nr\nH9y5bVIuRcL4cMnO4UQw729uN5JQ/gwIkYnlNvqdOR0o7/dK0sjyH2Lk+JGe\nubxs78m2zurDNtwYieS9E0pD+9MGQ5fCFaH3hmImryCxeRTdbNTM8HUbWr/o\nDTt/t8JomJIN/r36OQS2+ZBQfAXw9X+dgP6pWLy+ft1QDrWgS7rcaOQZ+PDN\nco8Q\r\n=FFZR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+DKynrmiQoyWixaEcrjjWxrJJ6yZgczOb9uhEdKFKPwIgNwmOLuog8Q/cPs3nX97XB+6k7eYLsQ5vRXA767XgJKc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.61fe5b17.0_1630351686915_0.43727814961821254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.a8c31f54.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dqOz7Tse8BW4C1WfuxAkpyPLz3SqV5+8lXHio62wNsafje8O/NQ8KU7ddW2Qz3BffF7ccQVTYXSVzZjKZCNmhg==","shasum":"e4086a0a1dc00951d5a9fcc8d4d0c09d1ef4f54f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.a8c31f54.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLT//CRA9TVsSAnZWagAApK4P/2AkjnOxl7OacAf4gcCr\nRUNdqsLOqkUdf9cI+rIuieGDmHvjYpvdBiqwZsomur8BC+6k97MAT/tLDum2\nU3s/3Q1N5RRi7TR+FVZ+Kt9nZ8NQ7psEL0k4uQ/IN1sot7qlFoaIPYuqGfsm\nQEtfQwiRklWqvYvtn/TmndxryAKe/Bv5ByuSmp7FT61x5DgeA/v8T3Qp8U+h\nk1YcfeH9tFxmlvq0EA06z6WS4t160n8WOLrFUzYRnzWehFWYnvgrn1ILJhR0\ngZxZLYBLEsl9SmZaJBKT0jULsft3vasbSH1ZZgp5WcivoMrTxSzbMmaBG0Bl\nyA4NqN1Zfxwc+5jMloBhzPbQ4SfOq7eoTSIr7toujHAOZnyX5b1n/4fMcdAC\nxAQR4qEsacHulR4dPOfQtqi2d5JOXtp8G7fM5XDnCnmW+80K8+xKkQ9mx0af\nMeQAlo+B4PxkNlsiRMEn868ydG+3KKMRjWP0ZEyK0qPxtLQFWqXd1DmHLNfy\n0aZorzpyo1Q1VWDidXNTJizh4FpaeDuoGqG/PDL1+pneE+ZYEOta9uUqS2kS\ncxTCGHvdT5otiNuhY07mdsmXWQCXl4Vc3kJL3q2I1F0ci58E5S8OLsga57A7\nphWXU4Nm4UYg3gdh/fO0LD4Lqc/IzirLBwaztgb0WlXfnEyBUBc8h+MrMYE6\nE4rd\r\n=xwfT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXgCuYK9ZsUfzNa8Sl5e9d94h+RVIGj8vUpi/1YbkbPAiBxvG0mO5w+00msxa5XUdLDakI5+HR3RCYctrdsI927iw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.a8c31f54.0_1630355455609_0.42798767402557236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.a096dba8.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/U6lip+nme3RTmkt39O6TCw8g4PUHFI79kTi27u26t+Fr01Qvyf/0kqzcOi+DeWd9D0cy4jjbk+/VWTbUF7zvw==","shasum":"c47cfe3567b4ba7ba1b2f8474b4222563076354f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.a096dba8.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqqpCRA9TVsSAnZWagAABDoP/j/TlPIqKn68jAhvoIzf\naQh1A2xkxyN5GPDB/QJOL1R1bx0+qDDHRR10WPizM6yq838eGPO8Uwkj4I9U\n4bQeaw/7CNQ+SHjHENJq62KuvlBU4aD+EmzOHeSdfB4Td3TwXGYEL6PY4Eky\nkxG1T+VvCPK0KaPBv1vteafJg4sorXWQCK/S2gSQTTkNiPW3UuP70DJEjObJ\nq6FCZZZs2YSACbQ+8IYQmZFoG/DHItrCu2a84UtV2NMh8i5HjKapc1lr/sPf\nNoq5PrP1vDOa6fVckjeavs67L8U8m9YwgG1bUBF2heGGYPV+GgcOfl/CZ3fq\nw0OFqLNIe2SzePxRdXvZh1fKdtMPF2AJew0zC55xRUcuxtamj8teSMLwUsmR\n+mH/4VTfv2SREghwIC70zrWxp2JjT67duO0EYce7J3lsp7ASaceKr90gFoYS\nxdCpp0rG6Iz17H9pvMNZs2gIWxCG6FC9IbtSsUc2kuRTcxs2s7hZ85YqJFGQ\nCN6H7CaohuenLB/7GgaSpxlTkjVgmeAIcCF4SjQZG2Vyk9//jOh7dwjCo7dC\nSz2NyADGJ9vSRIFBvf/VSemTCF9Bx3ynDGENyn6C1rTk4HRAff7rxOSjRWjQ\n8Yn6lQnyo9/Dy4ig16Dis+tMMFomDqmrtbAQesR3qDDLL4MUz4ItwcFkJwNk\nAPXd\r\n=BVtD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC26aUjMsecwikXKr5OUnJYkAr5ZSDr6Pdwdh08BNK5GwIhAJ6ZXtjoJM6fk/LyUX8wctXTVfUgiK+BCqwMXzGL6zzr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.a096dba8.0_1630448297706_0.9244929886816711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.7ec04d47.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YGQRBaVkwwNh0e2t/IjyTgpkI/2lHrNBG+vtjPLRxw+rkT+LZD8xz7p7kAwP8afiwacWuN5TiVCd9ophlYGccQ==","shasum":"dac6f80526115157c5178e0439503b019289df17","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.7ec04d47.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1FCRA9TVsSAnZWagAABV0P/jrGD4nY8kXwryG6l/tt\nJAX+rqynIJILTnhazNC0wHLwFO46R40rCQMXqgCUUEq9gj40yzWnnsisFgwL\n+nQD7bSVQy0a8NlqymcEpyRdE1kVEa5JH/B8y/yg/z+El6/UKwSoDxwJAvff\nhvPC89I8RPk4p2gf+38KpjTPyZA6s9Jf4tJcfEY19mcydF0GTHTbc3FVVyqU\nzuUJ6RM94zA++/heph16sT5dugrXYarFgENYbaBj71rnJyiXLBNHINHIWdFb\nUodQbi1qZ7PMJw+HhDcFNN7Q89f6rVEth+vNv9CQO6xmQV6+E8q+QKWzh6Ds\nS/Gzo2jGSI4XI1nEBVozE+5d1eTvblwoXPMfM9l8dVEey2W/xi9B/MAr8O54\nXPzG9aQ9Rtgzp4QmZ8b/5dpDDTS2dd2tIuTuAmXHE5RE4p5wZTRCGyMvXDtk\nf5AiK4SlQwP9HJa+hzRwvKgECiy+A2EbrMLjGX7Q7yjvd/+sJ6MplTP2++aC\n2f7RfQ0c26DzNkoaEpkRePD8EHjKNSjylE4naJcvUtkvoXGeVRKeRjN0IOmO\nmIsT9K/E2qln5PmQ04LvWb1qNaCZNnXtZYKQb7D/OuVI8NZks8Ry+LWFhTjL\nyP/Y7dVa8/iEc9gKSIrI4samXXteTnEXtFnCNz54fIMqGOx2yH0agGBlOMZu\nuf0V\r\n=bLDR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6PMSBTLE+Zu07uqdwoRvYZC22aa3ZYyo83xM2kSzNkgIhALtXOG2tdoaplHkCVpUdKVOt/64O4FGSjUafc6a9Qyor"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.7ec04d47.0_1630625093147_0.22678785840823013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.d00b098d.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZHUU0t1tfTiiqAvdDU7+4ia4Nb7JyTtGSeX95mZ2Sopojsm5iO3u8tZLFSFSUtVfCecxfjGOE2Pn4JjK+LpqXA==","shasum":"0f50fb3ed2bd88d3cfa6eaec861e80bea591718f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.d00b098d.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpLvCRA9TVsSAnZWagAAtgMQAJec7KxIFHyn4gPRe25J\nl8ImtCTMEkW+1y/USckJj5rI8k9gbLoXR9C7Pn+WsWm9OcCY9Wg93BtiELd/\njsPqKdbA/BpirE/+wFGziEZSNsIpK6pDFdsHayvIxH+t1y1nxpLWD9vaZmfa\nFiedyZEqZUYSEFo051YYltG84I+xQ/Rdg0DI99IvZlGkjyOaNpvz41Xc8yEW\n2eqktyyEKnyT37aVIs1wgcrkjK0Nh5ApCbTX2v969i0jBst0E35p4NQchsFR\nSE0+6z/BiXL21fseWaAeuHV0rUBaDlRb04eO1tidpwlWXGbfeXzOk/3nc7p0\n3yy1PrVP/3YbYFw1g1EE0OMZdbmhnj1A8AAq/qO7lFD+4aKhxm5l2Jk1aKFV\n8f4rnXjYecQvvQhrz2L9KUR//FCUi+AZ2Xw9JhL/D9g1v3N8tEZe4zW0hetV\nl4c57ZaQsIChl9YcgV5S3dCEKPzS3oaThzz9pYutJ/wsF1XQW44oh4WOvfKh\nt6bL4cla5Bts9pckf4RZWzeGuO0INxEhbRIE27dftxmeC4tqxyz257wMvVSU\nDwN8ips/pKsmu8uTNUYnFWNnAQ+wd7bPDl2l0k1CMkPZTHZIVZDLel46crZN\n38IJIWjWsSs4wS7+PPMuOun61obI1yQSrjT89L//X7fDXpHPdHZl49rLwlse\nDdM7\r\n=SSBZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFliEVacN25pSYRF1s2k+y3MHAnYaRS8vK/N8ayPz5rgIhAKdx97I4kzm+O9UAZyDaPRMywUXFZlAhUvVBn/8OP0Pk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.d00b098d.0_1630704367547_0.24505895512465492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.f29b3352.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cY1N5d24d9xtjUeWNbkjQWlLaZjYYG/wqPdu+22a3oliXpppB1sVmTjcm9hlg/fnVY2rPc8D1leEq8izoJpbHA==","shasum":"f2ce5ffad7fc23ae1ba3b1faebfaa52b9d318093","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.f29b3352.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6w4CRA9TVsSAnZWagAA+EIP/0p9R1LH5DkezUHoocKb\n/e5SQuVsSFE0kUC6G3S4WndKb554lxeX/FTVCHwpJMRtm44vhOVc5wyC+UCi\nwwP8bgiLtgPjTL62q0fqP7BIxT+XQuAzyhwyWI8iZsDvXd4y8KWl1oayhzSu\n+j9Mei8Y02ckrny87dd5ArFWJg9sZ0JnHswjDHjka2L9pRV3Ao1Ft4bLEvGP\n+coAYmcB/akQbxq13Cp3rCeesz/ll/JarpobtpwJWLUp/QHIhEq9PwPIl0O9\ndT1E3lcjtUtO4wQAt/dTRNqoNT3yzdqyJEc/VEBf5nBDLAnaeK/W3/fWzs+2\nbhstsVMjXMG2NLKrQrrwU5ykPa9sU/DMGrTsco+rIORTIgV05sEi3uCK1YT7\nR/XJVrxmskLnEwY3Qat/A7M6yTjYqMWK63EvCK4lsJ4VkwCDgSXS3P0EZbbP\nDFM8WIEmDWWQSKacESwYODcH9ihhOew/QeiNnyeb6H1LWlKnrhuW+pPuXMfu\nkzXTVxG7U7HXMrUKkbBl4hYM11wzzrfWtNSuvzG8oHgWpiDzSUqXww0A0cb0\nLm+ZqvktAVx3w6AClSDFeXlLAbqhYgZzFChmXJjYxSnawvhPbzdWAg5G5tRU\nKjdhvPaBXgPbJi4XzCbUPwDstILcyb9/rZa7ECUFg/wBU1EOojyN8UAYVVvR\n9qXE\r\n=Yi6M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4xNrn9Tbsk7Eh7MSnw2HpVfuM6riU32Mf4cezDnZ5PAiB6xEvqP81qV8NKJu0Lk1RfAPz5HmCQn62R80iXzIy8fA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.f29b3352.0_1631038519944_0.7291988226967492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.4962a163.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FDYJL6QpOu90vlm+SAygT2Yt+iYgC/hWo1Lp9P9RKnK8QgIere0oryAmDCwmCi78HUNxvDV8ouM56B83hRztHg==","shasum":"ef1a09a8f71c0ff6bd7cfc83d8e388f6b7fa7dee","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.4962a163.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/tPCRA9TVsSAnZWagAAG2sQAJwB2QmeX4A/rjBo+PkG\n+KNnm32NTpm1rS0GLU+xdlQ7RirRFs1ueLIQ6QDDek0/SIRev1URIFXnldq5\nxPLn3PlzkCm0QaxOGJhwq9CmeNFtY5bkc5bUXVZEp0MpoMID3nlEYoXu1pzR\n//7q7D9YIvI3m4pxJY0nZba5i117zSA3444GvpxK3jLMLUQGGJvwo9UltnrT\ntWzhlP4tYRkcu1tmhJWYPq18ufUfVOKp8pLPOdthMoZ8iIvzmvr4yOUpsgct\n4pOUOIC3ZNVMI/4YOT6Fj+cXnECBvfhdsNDW192l9Nsgdpu0dcUP071G6BaW\nztxm1OyAxheZZLNXMBzrx5pdoF+gjBaYChYuYwtl7TawljxBSw6TRlqzFpaE\n1RMrTRg9srG2NQN/kSV33/kzVZOy+IBvJJZL1dJDCRxSQSNUcDK4eBoBJGIy\nClEsLfHO1yiVVT5d6z8FsCl08ZB2up2kTbBj67pbpIG1jx0WuADpkU7eMu/C\nVFpOtMXtUePY2nWlNEk5uN2sutz74YDIwLn/SHA3moFK1JcDlHT0nim33s5P\n+GMTs/DdrYzgR4QUnlkb1M9uWQByIGrQ/fGJTQws5EXr3og3BawRjWArLwqv\nqCO/c4tXrZ5bjQuuSWC/3RLpwXizzg2x2E+UHvm5eREIPX8NSKMQYo9Gy5Zb\nRaOJ\r\n=RBfG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE6ablCNUmnDD3hBkNRp2byup4/cth3xGamw1e7lLZ1QIhAMOugM+4uc2CszLVjGhT5G4f3AdgWIlNpcDwRUQXTnIt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.4962a163.0_1631058767279_0.7726351402400435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.33102bf4.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5kCVzonwQ0lbtuLlE6JreGjME6dd66BBwIqYo5nliVw+WJx+zPORRg23seTLpWiTE6GA2JM9S3C44yr3ZjUFQg==","shasum":"17c621edc82be0ea3625bc6afc773f21f10be564","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.33102bf4.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAAGCRA9TVsSAnZWagAAKdcP/2oGBqtrJmLg1Z6NZCKD\n4RLU/W5OzI/wcDElVMu0YlyRavCZAItjR4TVTaWYMkNB40kr+Hl1w9lZNzbt\nnRa5inrIBgEbu4H8bGwEHk7mR5mh5M1PXDWq/WyBpH/KLZZeaaVqwV9WFnm+\n8m1t0SOT1FuMeFslB1Wtyst5P5GlHv+2f5SJGSYAfJ4EAboXa++R9yyHAJjE\n4DHzkAbne5rgQPzod09euGCITSqUEpeb4gtfLlH3DBmexpxRvmGc48mfKzQs\nMWzUgDgTYXA9/VKKyBn03vXgad/woDHEYr+J2uTS5wAUpxjBabIu1Qgje2ON\nBWw52ZLZASaSLQLkHGQi7boJCgw32mlebbfr3HiwncDC0D+Wgjxc2LnFkRh6\n5SGjbRwrcemw1dgBkIaGLVsHMj3BRkdjw21iwLsY9eVX5bCs4KuJhUM1dJmc\nkENvZ9ZQ50pvKFgE1wOgf1MxSDHnr8+Y3R07XoebUrjDMMJjjpfieHjGjBV3\npshFmD1RXJX6DQZxvSvG7aCroAkOcTF84G7dOzbIokpDZjQ9m2qM9ncitzRY\naIrLIoqv20Pkp7GEf/aU++xhXdO1XWzpATciqTWxNgseSm+lpl5lr/m49IeI\nhJVohrorGw/rYAUV9yWtTpAz/aBZYZEBeWNx12uU2c28npxV1rSGsRtL+LdX\nn+1h\r\n=R9JQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8zkfy8lkP2UjvWI81KOzfgp2kyLf3HQiJkLh4paxZBQIgXVsbBZNQGNI4zifly/byFiRuJ0eWontSKaMbszs+onU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.33102bf4.0_1631059974718_0.4122961855340863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.76c68381.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G0wOe2/2b08gDdDegW8hqoWA2jo7M7RDjyKsO7dKrvRaAuAnVWRjtRvi2NSOFE0wp4/GPiyQ0CWm7EugKuSFgw==","shasum":"be55d1214d89d4453324e7562abecbd13ff1edd3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.76c68381.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORlUCRA9TVsSAnZWagAARuMQAJfhh5kpfnjAdHQl3hld\nWv2UzfbuG2HXTh4VuU2b91JkI3B5EUKkQksNSE0J1H92FPzFM75eEBxuw/DI\n47NfoLIx/elJ+z8y65T18NuJdEONUX6GKf37eyCpzPCdmYGhCmFv3eUvHerW\nPwEVVmezv1i7yAIHAu/JRjlHZXYOq6aUjMBlseDdK6VhpNWF2Y7lZ4Ej7xrT\nss9qMN0zw4YJXPnvj0fb/29qeJ5RkNWwh6HbQTZpfTX647bqRUBgAZCba+wO\nPzA3ZXoiNJoNasiefQkjIlsFX9nMdf4LAC7K1Sqe9F8t9l3UAbJcQA6eC+V5\nfx93Kaeoq6qD7kdadZincEdqio0O152fADKwp2L6sOvwrIMFdyVosyMXe+Qj\nwJ/IYQghRUUM8wd84Zt1uVcGpL/QI9DAANNPhfPBLr+1YKO1ZlcUnIjLnEl3\nLwXBtOAE5Qyz/aqD8rzZgAGDJr/SqRVWj8cLi3HuqtgULTpdyC2AaDb87OIa\n70VHipHA3mmeoXIzbhchex2ln5Rai477utPTQaf6weP2oHZobnhg4tIjOXNa\n4nHSvihAWuuFPiyGiB3VVrSqH9IGHMCTatgXWCc71uDLdvvLfb3bCXrM4I1e\nd0RALG7FOCgCZlN9cTrXFxM2uxSYrdIhhw6W9qfbqL3DoG/nfpkPQdCWzq/3\naj8s\r\n=ejDZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGYVt+HmXD3IqQVyNnb3fPVJQ6A5172i3aezj54WrxbAiA7db8UW3GottdulTXt2Ksje5zm4vZMcnnRUZyxyoraFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.76c68381.0_1631131987937_0.7369612625329622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.17d51f76.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I3Gv36kyVq4C0eM0mLW6yBUym+AqH8sae/vrjbPrx0+aRqMVK1ffdBuRVS6Gbw/en+/onD208qRfaOJhfXZQKQ==","shasum":"56b9e07c34a1128539bbace7afebe30f59a03a8a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.17d51f76.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUZ5CRA9TVsSAnZWagAAIfUQAIA8gBTddP/wqTLvMjzF\nnmGJmmDzVPlycj6mTv5jhPczLjiOIeZTGN6d8m/nPQ7KMxuYdO/jZqfEnin3\ncW03wx1P6SGZd2hzSVuHP42fcZZrJuGfmaHJcdB0pll5XkdFrXE2kWvq8UZ6\nn1vvkemj//ccUtG80EoThpyIHaK9bJ55kaT97nM7ROyfh3fVkaAIWjkHWDXv\nbVK1bInRy5IZoShjp2wZ3UXMK4/AbhO0ZtkFnsXMBKWX1LUAchZWy2vz4Uko\n7/HlMF/vN0skDVc8e2ta8K8LKAupyyNhnHJ7GX0q2Mx72dTmR6DX0EoiBVtf\nseYdhtHHwe2MmFNeFVPoV6vwrnMmPKQePGHr7aQcoHbxMeeEfuagb70SNVN6\nWMa4Iyhs4/nfORzaJkbYJQEssPK7vpk3ROg3ZavRh3gfujKFONL1FE/rdbHF\nkDaZhItHtZQ7lep+/JrLz/vnllSE/YM2o71TMZhBnve3rki324GSteK47aj7\nAd73naWiLHGjSMZXTzfHrC7rSFU5SLKwjNW30Me3MlNoa3stjn6zTTEjFict\n1BMolPmJHWb/l8UfN6UVfzXsrjeygJGT5fKVBtdRR/EWEYB2oNSxiDnNuaMF\n5aRO0WzRJakt9C3nfsmbipqXa1XsleCPlW8GcZVAoDMR5HQFh5tg8cfXbvCP\nrEKs\r\n=vx3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGAsSdXSDey1Jpj/PZcYk9O8Q1y26jMfQPKs+e/GGwdAiBxgkGvztOe5Ugw/CRtb8Hty+GTX2m9y/CV3zTbd+xtQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.17d51f76.0_1631143545070_0.8810924429132547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.3fae6c2d.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OzLsV1yIOw4m1zbQ7m0HbpD1TTzDCP8NsZA+zE6yRuYGmdSW2NKmPyldEVZcuHPypbTO4OpMa16vMZKNAQ6OIg==","shasum":"e8b767809d11926f9d957f9316dd3eacbb52581b","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.3fae6c2d.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6SwCRA9TVsSAnZWagAAsKMQAJgmb+XHr/fDL2l9q77G\nDGjwg78ov1UBlqjRA3J3xb2nJf5OmBgu1wUx3clas/P1kTBsEFLqh4VzoWW5\n99dq/o7ZuAo/WIhxbBr5LIXCNpTGs3b8HNM5rCBBMLTlM4VK0eyRozQOYbJT\ngp9byTVVawZjKnnhr8Sx8v0RJsY65gMN2VVfyntW5gH1Bl9CiQaoRjJijOiR\no5UZZlOE3srABN9d4TxmgAslN2VR6aCPoboZqPPnxl00KriVpXYoMap3y2yL\nkLuV+oZa+mkyz1dqJtNuPPVnPgO+H0fA6qOZpMYlgNrcC1F4BueMjOhxazMm\nyuJmxRzQkjV0Yg3FNcKEKg2hVIQP7wKkIYrzxZV0BRsHNI1xl4k+Dv1ZvF0/\nQPDhWw1mqrnh2um1bWamQAmCxUniHAC9BhQ8bmcZXy7IQcX3j3r1e8xm7Tmc\nhyjY/Ww50KbZlfvdGsh83gNKyqRf/y0jPZLaN4rFwQ5RYJUpVZSSUAq9QM3Z\n6bzr/OfTFvoQZv1lNHEY6+CE/X/Klmg1jrjWQsVoiNVqA5dOdSGRKwNd2zwC\nYUEE9SH1tPbQbyDGULavWcPKnFWKiP+quVwpnyEal1ITM7OdD5r7HHZMSPG3\nuITmtgZqLAitsoK3t6R5qEQTCFQcEYxsyuOGoBJ1C/zFMWoUOjZFVrjimamm\nk3xC\r\n=lTns\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQVPNyBT6vPP0DdH6NeEta+I8NrMgTHs8bRqEVLlZk4QIgckrZXoCAUM7wVlWmw/IRvSMlFWEIquCGv8dqhJkSE8c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.3fae6c2d.0_1631298736160_0.7100183187700537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.f1958c4b.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zKm3INezRIpQO82/8SJjm7BqHoSLO3TliXlz+tU55Goj/kFFwqlyZP6/psex+KEdRaGJFPIiKzet+7YxvYFbNw==","shasum":"0e431d42eecf045c6a150df42cb797422d69603f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.f1958c4b.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6RkCRA9TVsSAnZWagAAUtwP/2gyd9SLFAFtWqQ3x+UR\nDagIG1RHRBnT+Ie0JhMwbVU7wr+KY4UESpYz4hiMt/tXrnYVoNQ51TbtX7qe\n52fZUFZxf+sV7QTJ8QpwO7pvlMIs+/tvyX1bZhu7RMDdV+Duv5/gIMx/EpHd\nDtzp/dVW3Fwff/EWlrKPphbH06Hv7zbvguCSmOagvOEt0zBKYU09/b3kaq/Y\nCsxbwzV90Q+TuvagZbVgCkK/F+aMe0hD3F54/GCR5k1QBKh+y/hDfcA+4Cmu\nrNmfMnbyFDSlaFnElrpCWWyQtxyPw67uC6cS5g9oBGsUA3ZLqnFQmc9YPq3i\nPbuDMC/RkFJ5+2TwnO2AM82zbOzJEnUKzuMG47mO6mpYAUHIQR38rYP7hVks\nU+ofEHcUL10WFysbfeef0xBt/130Q/OWuPjvu0jwwDli23GaaB4/76MhU4WV\np6uia+Z5QOd7EiFyMC+o6qrYs4fkkB5zW2iCqsoB+Q2Mtx1+Ni2mkLxjJJvb\nTwA6TCYt0IWpz2rTKpp74m08s2W+o0CttRdnV2zg7adq08EniUW0Kvn+248h\nz+p7z6UKYn1E3xuycjxhNuQHX0nhUkDEwTG5BH7bfZG5WmQXa8BdMPgxOy28\nRYmQeDPzqcjTPJSObe5kDlNM2iJBPdcjT+gj71l6TErhXERLFk/sRF2He/lT\nLPQ6\r\n=ciyP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRK6Ibjpjt9UCFIsqbJ29OhPpbNvb7YffYAf4G2G2/5gIhANykqerM4f3MnOfuutSXMyWlzQ9lwjQfvWr+SXDCPTQH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.f1958c4b.0_1631560804337_0.37533388447798366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0-canary.78abbd59.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K1LnyCNBJYE0qJjazEbprooOL0eBA0XOYWKXGuW3iOTATzQdajHnSw3IZ4mVjsa0MIJ00vzNwTxXOQO7X3mlew==","shasum":"e70829e29bab62abb246313cbe4ec8786ca0481a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0-canary.78abbd59.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8HUCRA9TVsSAnZWagAAXYQP+gL3CIcwdvLP8pwyDknM\ngC8405EDb8YN3W/tdo2SQth9nYNWJClKwOB5kSg+4cbT2vY6Wtx71mHFbR0g\nZd3Kkq748gUIX2BCUT0VKGsTuGsONZSYVWVc1mbvPAh+G5NMAsuCMmHMqgp4\nVf0/K4yYgm8iIR9unQiifje1KYVlslVn2NHIIXQQH4EF1nsLN+bBeQnIrUNV\ni0dtmnlMFWodj+uIM9n7mbNrRwzf7YdqlsjyKbH/RqLjS8WvzUwrhDj+2V51\nthRuWxTMwTUveVwF1BD0WWr2PEG1AwMrfW0f/sXRIDO8rxJ5HpwgMo3w2xql\nG/BgDWp+7Q99hlnm+phqoLsYtHk/Hk46hzAUgRDCtSBWrJtf2FWtUl4Rpk5B\nH5pgDzB1R4+uJ6foiL4Wx9q5xdeAjZi+LajI0rrk3PcjhVuSK03FK+JRkAqR\nPF5gZnNXmf5s07D8R7we6eHal+Eeri6PZt40j+DXrCu523icKX5uskUz1X3l\nlILvUQ/GdvDOvvz5hdHO61Bsr4nVSoxIPRZrZ20q0GVbSpWWCw5xf3pS4Om7\n0cIYBlz+Dlj7E4qvCjK3+E9GhaKrHVW1/xmG5dKZJ7Uv+YZPvy7Kmny/w/Vr\nFlCHRHgLvuqVVDSFCzuk+43XnSd8ji9rBExAKVxJOmpiHunjfpX2NDUM1jsD\nFijr\r\n=LfLJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBg5KQ688fjTRE+yDGAxRQYsvjE7+1njanKxpIAPyeLVAiEAyhKu1tTTKNuuIbciuvMs0elTKFTW+tvUIXwoKYVppr8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.23.0-canary.78abbd59.0_1631568340500_0.6641076857865587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-elevation-overlay","version":"0.23.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-8Aw9gdK3jXguKaDxhEoV7u2qjm8vufwLX6GL1AYMgtVILrttnneVzRq0/micA7aLqc7Y3MXCnBkdGMl/L0ww3g==","shasum":"b9e0f838a54ada0ab8ab194c49fcb894531331bb","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.23.0.tgz","fileCount":20,"unpackedSize":337008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QmCRA9TVsSAnZWagAAuDoQAJzQ4c7pRwdaYJkQQm8f\nELyqwJDP/135Bm5M3UpQFOoiYD7F+SzuVjWlklXHybd6kVEF2hhmbDw1a7hR\nNFBZ+eg/4olhkkR+OqfwpHA4u+gbAuIXMCRWh+Ko0Vvd/Fo/B8k7iux/RTDC\n/CRl2It68myIyvSSak31/Lyo09mhO4VyDu3bGmBQzhFCaxCVu9gPokKKXYgK\ntFNsVIqG5XznF8bnpir3yvgdENvzSAyEY4cIpDvWAtYJF2e4YgM/1TKeX+zy\ntPCc2I0Mo2E89JtYvkWTKuBTTgoW0/Sx90ljt6ks1EXH75ss2tCf8lF4YWtO\n5lfWnvUYf394hy9NwoF6ik+yq9Gob/COLNAkxEy3YezzGQgddWOyFEB+rJpg\ndi5c2vC/LBtDD2rs7S7VWy4yFgNUyBsu49b0/gDP4quzGFAlQSGCtbAo+WF9\nrqkPqiJtXcuzcBjcL2lJK8tDOewskEzwmok6+XdmrOGgH+2xOFLMJDSHJ34c\nsMJJlfgnM5362X3/1BLb/xt3G16txtT8sMRPPKA8mKaqzraXfUqBKOWP8Y45\nBD0AJEeYvAjVQw/tp1z6WOiBOFZwbbtokhFtSuUe0RUg3QmoFSExhJ+BFMNL\na8fSqJRHaHaX+sZLzZ87/M4t0/yHnldBr00qcnF6A+60HrDy+3JJzLE3LaJs\n+2JX\r\n=WdPi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCp5MWSw7AX/i6R++dI0L5nuKZVyXBM/YhislP09wdhAiEA2lqjjqJuQT8lgn2FKgMmg+OrbKQmhp/5F7FNAiIt578="}]},"_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-elevation-overlay_0.23.0_1631568934592_0.3074478177936475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.9830d665.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oHGBeFdLIrrllIaiYvk/6EmbuxHOOJhE1UegyIxAHfz3uTvC2xIY/Eku4sxRGWKqrpljymbBenpCj1lKfoRBHw==","shasum":"f895fb68328d6aa53d813fa97785d7c422edbe58","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.9830d665.0.tgz","fileCount":16,"unpackedSize":329215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8RfCRA9TVsSAnZWagAAF+QQAJCc618mGwmYgFa1BHQ3\n6OioQiHGDehdnpQUW7XRICjd/+ivCh5wn0/0uJgErDNhFKFny5+HLr0BWEMz\nxN5u7YvZI6C+YCj+MzoJGu0ULf98pAC67etNlVFJGTdP0ZdbN6wr8sKAPQW0\ndqlAU+dzi+2vMxGoNTb4jz9TZAKn6AYQk92USTcilGcp83IqJZLLUnHI8WSx\nd9o1xxKKy4wU8T5bq2I/mpGhTbjMbQIAPyt63Vt/ztd1aYXIlAbQydVTkXYC\n6lu+xwzplxl9tnScbKqiwYoWSTUazM7espV9jYc8jj3UlMIGuCT9hDtR33Be\n6krLJHEnTJTOkTbny2IEv97dt3/nklybOd/n2FmdPMtl3VqCfN7pXtyBE+K0\n/WkAObrQSEOaSFLaUehMhlQPhOemtbJDRlYT7ANQAX9xqIiJJ69xz39NchdJ\nQ9Xd5HTR7T1QtNvFZDCxRfG625HqPK6Zo+8zs8FLMFaDMiL5FZbos0VmbIn3\nHFkLSsxoH42jnfgJRrDSX9kVtjGlAezjfqgnVZFo8RPy5vjs4jQOqSz6hx/m\nNcOi7VexbmJihaDracDTUUa+Uuo0clMtIGPdyTTUNvZFRMlPhlfa0mQYdZ+q\nal2xA2KdVIOgPxXHo/JUBpG92TsB2p/xKoWH3bwjSxckSb8v7KHSyjUXatxA\n9DhA\r\n=gbIe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgeEGe/Q3kzcTksHZyvgNnMnk9neAMmbZTlfoNPUdHMwIhAI38QwKQ/rwrYeHShb7Iwtuz1q+Y34CMFBP3HzUGfRAe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.9830d665.0_1631568991076_0.6866737184724307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.20e2081c.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fn0N8qkWxHL+rJSwKVX6/53M2o8Yy5kGD2vp7o7+v7fN3tDdB8Xl24cySbT9y8UwSFqauoesOb8SXiu45UsFSw==","shasum":"d6f8b44f1e83c19759f7a9513010bc20e06ea4d6","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.20e2081c.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP99VCRA9TVsSAnZWagAARxcP/jUYoPrF/p84DoULFbUK\nPZjD5TvdWVaMpXK6tlCnY227wfCGAAGa2M4sZ4U1yayX/YBZiHR9bdBW+A8e\nOm71xb+hq7NYzD/dH5MeG1DbR6t8XPZfFrm4x+fqpbw20U2pgj+XPhzMti3O\nUmrsoY/dkRWlOUWKW9LGpE5NDH9wqcJkIHgB4pMsnZUInkWRiqD/z59ueDkp\ncIIAOlAyrGqrjUo9Vq7IeiSibuLQOy56OXn4XP1rxLgM4g+MtVpQxxaE31GS\nFoHtjsVdwr5ZHe0xhFs2RMpiasY5RvgguzccodH4fRBFRI6HzhwWNhX93yue\n2RUXB/AaVNFkrZ9OGiZf1Im4eW8G+kdAzPiXbBK1TPNuEm6eQEgmfsRKZ3rx\ngZKjFg8fd6lopFG6EzPOW95oD0Q2/jo40VSD3eDOqSAy7bUl684nHYmhaAIE\nilWo0F4f02ukcH9N7tqrdDmjX147eZqa7FHmTzqWg1Bgr3T6ZWgqaLvAoyll\nC4ooKVGzPXLSyR3/mXrgUG2E8PCalFksEPRcaVRiQ2Ft7x4ie/+sACefIHma\nK+F+VxzjkyxGy7ADvmWfAhu2D31U1+88UEKrAJz5z5KKtNex1qmtgoOBc0o6\n07BLTsSWuC107XkE+vpZRBKDAintVZiEcPlQE2cQLkmIF1kK+54RZ+AdcXlX\n/JoY\r\n=R3FP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+U7rZ3Caj6VNwqXz+SQsDMXuPanbh682WumOtOQpjqAiEA0Wq6heLOgsMoJE7kFs3PwpAPy2/a8KCruGoAXPrvbs0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.20e2081c.0_1631575893758_0.036815819984184595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.583613a9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wNatfREJEqIZ//1IdrJlLYrcetreA9wpG6VP49pE15tZ9ntVdZrDDjbTJxjvwN1lUJVmLRmvGGIp/FGBpoTJ6A==","shasum":"1bc5ac42998e464d710100e0192f81f9bcfeb96d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.583613a9.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNPHCRA9TVsSAnZWagAAeRwP/1vCZhA/HCVmKzHpSrMe\nG8YmodODTYlqsPA4mEZDetSFL5+NLUwpdZUgi2Iu1gSaEliEq9XMmETrzmpR\neCmMZdKNOJVu8ChFPu9Y1LxeHA0fEfEJTH6PpRAQ9l0QCx1rlGLms284hUQJ\nKC7jgandXfb1pOOQu0Q7dNzNFwcMVn+91P4YxqpS4EizK60WI8qpJGJx6w1t\nIk9LxvdpPwG/5k4P5LJjgGuvBI3RMGK1WUcI9Da45W+zskMlRQR/96H5Oz4o\n7dnbaGNay4K92+vt0r/sLKLnRUezbiOLL2Cvcza5pPgR+dmz51XKG44JyCCC\nSFObK9TzW56n7qhtXLVyPnUh8q/z9x5BtevtcWV9F/6CGPUFTE9r0VSozvsx\nMmneHMqfBHWUuS0X4YNo8tuwpEYoCim+iLAd5TM063QD1QHa9sxBpp6ywU+w\n0wIeo2b04AspOuC96RUz9TS+kio+QQ8mQNQBXse83Gv5dWVKSSTTNYDXGWJR\nmp5rfsn6QSGsWQNlpd8fliYF0QHNU72S4XsGPr3xerzKPM803KAPy/K4rkc0\nu7dXd+mOzfndrvuUsryd0DUex5sFxY0dfr+hxpM3ceEgzJMSSXR5EL1w1vG0\nfFhd3I7QXfn2io+uhHPtZsqPIa3A64+ToUj7D0wYj51SrDZDUe0NJQGAI5p0\nnU8N\r\n=bdj5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjy24M9VXmz6fxYwNDv7AWxALZAT3nre9kvRLSGCawyAIgUvV/5HA1zjUzIwTmXcfg5BNn9k0fb2WQULFLRBw5AWY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.583613a9.0_1631638470944_0.5657297649711486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.0e1bd56f.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IgdZMftBJQj1SuF9ags0KkcaE4RQBcpRGYeWy7od5aPj557GXk/U1H3lCtQRZ6R6LDncLgDHVi51QoDlGl7Hkw==","shasum":"480ea5fc893099870d869aa162e119f7ee6764ea","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.0e1bd56f.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNx3CRA9TVsSAnZWagAAW/sP/0Nh/R9yzoo4x69oR/34\nLIzio4wds7zZaW+nHzvabOdMjaO84aIysrjGKsYmTji19HU5O/TKoVsaBbSQ\n77DmViSQuyTlHXYLlRW89Yb6CliJfGs9FPCP2aFBNS1jWdCGXZPstwASEzH8\nDta8P2xWhKdDfcpLXpOIui0+Dhr92eoQKwTuQwnaYMMUavVC/T7dCvbYF3pf\n6Ejtsq9fJXvTD3PonI2+GC4Asi8b7E+nuXFjZWYJMJeO8fviB4LddZhGpA8v\nJ4LLjjqQKWzQ2LuWhuiOA4n7Qa9PyUcFEAdBPa8DcCW9aDt4IoFFjgkLV/uJ\nA+ZmNIuBTi0I6B+2T+FDCmEx0/rSHnmw8KwiGB7ixR/TONmSA9s3BQ0jvTf8\nE/9CwRQNJg7SVnEjNNxSIsbipwNngYm38cvGaclsm6M3Rz53WwHeIz+W/+C+\n1JWETJkjvw7nnMqRuqR0EIT2k+NDKQKokC8DkiWotUVFNvDq//YVuOipiIv0\nBDYSEomwWl7awjcITAbGdcuY4VjUBn3UoXYPFuGalLo7ESqY6QpYvQ7yS/j5\nPpSH44t4U1VV4l9YyxLwNOWEMc/Cx+Kkzz8p2NjFtsPTnSXUltRsd2qWUYBl\nSrikKzyxZTpc93tUt6b8GRIeMFT1B9NjcxMFhF0DtgZzpBkgk4s9f3belxA+\nxGpc\r\n=ucuY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaVfBsjL3DkW68VgZE/f3WbGyWu2yHjZBG247a6rIeqQIgOFNMqm7CTjMXI5+0ebHfmTqWn61FllzF7NrBHb4Wbqk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.0e1bd56f.0_1631640695056_0.9870476182278312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.7bb1818e.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rpSN6NApHrjOi7QLZ9WsKRIn4cKptYsWgB0McRkGHcFoPYNGGtrx5Ql5EP0Imx1Q/B/UQssUfp9CxJ7n472PlA==","shasum":"7808b37089c114b0d1ba3bc77a45ab9c1e6bc747","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.7bb1818e.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/BCRA9TVsSAnZWagAAp7cP/jb7QFKuv70u4q0cUV1c\n6XV8pTJdARkQR2W7ng5CRiYbYpyrk5wBAhwJ6EPEtJD6ZHTw9mo2cb8s1BkS\nhR6l/t2wcnD3CWYQgjGvJb23jZf6SfX4MxXDhy3m7heYtcC6HhKMzROrlvXB\nns3iOxlQ0D7vZZ7NWo7V/+mtqcNf8dv92M/qIrngUYUwHj7BtvYJh+GezOW1\nE467+D8+7FcQq81CWRoIOjt35lmPvdVMxNZpLnpkcvYBztnpAqJUwz7D/SNG\nTCVDbV9aebph+RPipdvqK4tvICEVx8Sb741jlZnjXuHepORITD7tOdqy7FjH\nfsvRHNYY4gnLh+xAsgRDZM1lOFnAQpo+eSpFvAxbtCcZGq+tWO7iD5XqvLVw\nTS4hMZ3GHb184PLPCda963IpNg3kbkb7EJm1s6vzC9PNhPTaljRGUbKJDWSu\nqO42km8Sh6KhkxlGCV+bTDuvCekj2yrF1dfrpymlC40SEtDGSdP7+V4yFwqI\nCwzL+dOEBp7eWFaepYfC6Dyx46czr3IYAilNvZVNzw/byTgf47tSc0AVA7I+\n2V+aiKMeLgveqN8XvrxmR/F6FmjUCyY132Ul2UYXnWJcPSh871t9wGOm91Je\ncxqzl2byj+kwjTX93NqWqYt4N30KDPt4r2BeebN1ZAPYH7PqtJZHoPbORK99\n+NuB\r\n=QkfF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKm+vbYLfrE8kLm/a0CyLRMxNeJeJ76+0voJTqjoHZywIhAKGKb5qBkePxu+gIiHQ6FlI+RpzFY9ghVc5xh/K6Spc9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.7bb1818e.0_1631666113445_0.46774913676720997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.b5e665a9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q3n7f74UZ/uRCjuiAAL1ce2zG13NxA9fw0yAVXrok4dfQH/fCbCDAowZ54TO6QQYI9G2KnusUfNU6WbH7y6SrA==","shasum":"5aabe7703d88dc1de330504f8cc6fd5ae7583d54","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.b5e665a9.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjeSCRA9TVsSAnZWagAAZZwP/iMhvzTzb9qHyfUVOuZd\nJRf64VAgOmtjh9j5fECEbfO5SFz1ShjAQbyTfTYVm57SqLOvjlz5QiNAp+MF\nSzE9klF4UnNUqULtn6HRO+6n3q4ebhLI38opxXHDpl6U5IRK9Vi4CoxHZOPD\nUxyMSCb/ytaTTqSpMjbwWorRdAPCpO22Mwk6PhaRi4UcMOLCfgwdOeDCRyao\nM7Anud1TB8KJXomA5RrHCza2rutvkzsQxERQeDZcaR7uF9sdnKdJsYsgBGTu\nxtnkOQqQCl0ptnE0RI/WRo+pIDZXN92dGodfScZfBOTEonIG7210Z73C94n9\nFtS3f+4fbhgbMGeCbWta9YyUipIWrkWJkbBB83sgBw6BbxBur3PB9QbrGTco\nKrlM4QpFdTNK4TzAGmlZJuITyEGjG+KkgjsUpAg1XN78BORtPzEwS3jwcC8y\ngnawDysADzS2OIucwb1zEuunNNcJKpOU7inRrZAmIiTnykhJwiXtRHB9ke6u\nrasZeR4WYPa3b3H6o0Mf26Yn3qhOmUtfSLl6Ul7AUScM+jFBKrpdW+FUeAuX\nIubeQVD7GeqHHYBYTAE/QP76VBm5dnMcWEONZXxtAQ69l3dS5Fk12KcY6Qzy\nUZlZWtrgCEdiKvk5PzswTuTCzxPFfUTSvFHMVtG6F/sDw92dHX4XPpLmvteM\nHDlq\r\n=iti8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt7w5qEX+ThfxjI8mVNj+X5HjPAkuFLeOQLRpfV32EHgIgYtBMVk5WMjWwojCOQ5g69T7b9WIdIdNGdGwE8OVR1g8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.b5e665a9.0_1631729554539_0.7682331389862416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.ab1e177c.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qvLtUOIRPw1UMv/QcW/JpqaZhkc7/Jt5dDwL5mlLXQoouYsGiodgsI+ntNnUmf2T/uqzueCsELhIILNWyzSHkg==","shasum":"bc18d9e577957aee5aacb8d81576b3caef5473ae","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.ab1e177c.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj70CRA9TVsSAnZWagAAKw0P/RuN4X05BpwbxeQy902g\n5XZqg7y5A73mjy4Bomn4QYqxgR3fKRVwj/NLwlC/C/tEBLnmzYnPReUAQMGZ\noF5DMgS0Gqyc/bLt5fM8UR2b0SOBCKqbuOifIgvGYyY4gWTpiRKFRtUZjixY\n6/+OwdITlkXc+dr8T/syR9AGeZxUf1b1BPM1M0GpqZU2wO9TcWyMszeuoSPD\njknHSydPTDaWxk3VRf8HdmmidrFLRj0BQTVsI2uF/mXMLsfnObbVwPOb6ppl\nodUXsVkNAo9FMxn+HCcOYM913MTMwmVZaUN0FXs3F9QeD567NlkqECnF4SaU\nLNIY24m+LhdEqbWRbT0DpqENC/x3yo+/xYGd9+s+cIh11d8NxXcR0DBy1E/s\noqpXeEEzIewq38qtfVDIYcF4lC4KKAWFMHROMhP1YHyHRIDMadecN8mst0Sl\nraHEG4xD/dkTNmmAb69MKEG6obLqSYFwGky1hSAe/AveT7JHv18JCo1MsQQp\n37rQBWSRdv7EONXW/tskQqj5n1jKWq0bZ1eLAC9W/pLFY6Xre7dEZbqGJphZ\npSsqTiL3wQhnoVpFvYNfOzn7YYY8pAj56QtLladU1stONGNw1LKR1FTEHQDS\nV1ytxum9Uci3QlmWq5vS7FqpO0mS0QLzLeXK7Xk2ABQ9AD7rynWSWT89dCvo\nqHhq\r\n=+oS8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYUaEXQPmsB3ZTSB5/uW5gKakLel37+WGW1YKGQBLFfwIhAM06EnejbJfKYBnJa7XRxjeEIdY7vIjkuAY1UsEYSl0W"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.ab1e177c.0_1631731444279_0.1788263715163012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.8dff8894.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tOARuCKLa3/9mvREuTSBqp96PeMIs7FQ41kbW3LLSlJMgI4KMo6Bdmcqf8HqHj8ZCKXBQB97pZxjiUKZRCXGUw==","shasum":"bdee3a05e3dd07224aa6bea11a6e89d3ec236022","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.8dff8894.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkSMCRA9TVsSAnZWagAAdwQP/jSiKpnZCPohmSKxu72U\njexGG5x9he1fnU+Zp1ywGvXkYHc1FPn8FAr1ZIk0B0IdoZfcFRZoSOd0EFKo\nXd3o/Q+nH6JhduS2GCsziEb3wDlhqvTQfcdXK0hHUXNaOS2aWtu/P9pi1oJ1\nSQQG3OuHZcul2I/b1io1kUba47KF4OrwU+bvBarjeqvA8oZORbZfa5ADJTiQ\nn6knkDSSXW0IMipSfrQ8twcO3xYct7fdg1mtpdDdetM6RHbhzC8NPNGBwfEx\nnBCaXa3KuC1P9YASIVyW/WS4MPLAfHvKKirE20Au4uPtRpJ+jcAmcjJUg9XH\nU5q4RMGAqRwqcxqKaDRMmBbuM0LGqye1nxT8sw8eXf2lIeXKFvHiDH6Gv52g\nN0g2Qtz/en/Bcj2BEosf3U/nFIu1BkCfL84lHc543YDFirj3oB7VJScVfUFd\n5zldsyecMa+p9p7s42WxNqDf3L3buHgSN5VkgdzIBbkv+XcN0Ier7ZUyjAxZ\nSF5bNTqZCYK2zk5+qcuZWC0sbRTOMf/GOwTlIwETQQyGSL62DVgVjK1H4GqK\nEaQA6MSXtPOMYiUpOn660/v3+0A/gQIZwP5sHBHvSDEBZGprCSS6bl4J3XH0\n6UjDCPzWAlj88a9AnYdvgWtmZFMG2gRY4cGOvnqKZgIQeWpnBBgmbK3bfgW1\n6A/1\r\n=FjeN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDrQOZnIxsGmdIYZoFbd7lTkZQs2BKuUNs1L9fGwogUAiBoBGqy1XbgdUCggC7N2dFzW3gwiPFk0jlItY1DLue2yw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.8dff8894.0_1631732876442_0.7431995532028897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.9cd7e927.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qMzbJkwjJNy4djzc1X1lXSyW4EzBiHGqPyF3Ux6yiPxWTej2GV9ROYNlCWMlZzSbfTeBeeFFb/1JRKz+z+xWgw==","shasum":"ba318e79b96ab1deb43c1a03a5c15ea57df3186d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.9cd7e927.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlgkCRA9TVsSAnZWagAAoFYQAKPOP9AHXAkvuSwO8yQF\nYGGPEj+pMfRPRk483MFnzSesiCYxNWh1+n2Pc2Gyps7B025HBhvxnYxfgtaW\nOFbQFfqn8YKcr6kX/SjCSr67J7+du+DXDGK9J0tCU2XMedh0RMs7bbelsGBH\nVhPGh55jxN/94ELjjXrHxL0P9bSgyKdMtu2Xj9zEtTj76R2Jo9EAE/4IeXQ+\nLI8p3BRC2hnJtFlblqFUxX9KaMhsFNs6Hrl15Jc/UFBhRyg9clHDf4Jzl8Xi\nn7UcDULIyEvZan0V5Cj40r/Zmr7ZORH36l28aoVUYAhiWFaE1fRUb1jmCyCM\nDUrtZD4Jb/1/uBfyG3QCa/WjaM81eZ/JcXRmsxH6f0IyLqYqoLtRT65wIYSz\nZ4usxE9TkTXk29vV9W2js8Ih/eMDR1sEqFrCNskAVNBdChMeYFu4GSyOrbre\nPLzZSQiHh4e8vZqdZ7T/nBaSgztNzIjxaOpJNo23yRJurvlTkSNy3sHJajwS\num0tZjyiSzs+kyNCKbMTTojFFUcdD/MZ1CrLxOqx4/OD2cwgUGHyt6jN/Ip1\nEgyeo8fDMXMPHAv/GXqBAn0qeGxx6+CilZ+PAPfrCsoeUM90yYnx55VvDzqy\ndivPnhY1ZskbbOcEfEgmEviHfwHx1QwkgqqTJdq2SiD4dr2AH1rildFEDebK\njwl9\r\n=mTLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5GLK+6t4DhnfhKaX6VZgX1I+atsSNrmSxnAN5DGNIUAIhAP7+s+Fv9LHx/2g4EUcHE4IpWa+SlQBbSME1XyRKREqn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.9cd7e927.0_1631737892774_0.5382089810669126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.a7132082.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-13ViM0Ch0gKI1Fa/89cT1o0Qmm8gk99DQiaAg673NwT3j1+yFvSUo+D7m65V7iq7WP8zCYIiDo2usL2dPgN93w==","shasum":"4bcf782c60f17ca10bd15500baa1c4182d1e2fbb","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.a7132082.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmlbCRA9TVsSAnZWagAAIvkP/iOiy4IlWLtDWwAKDR9x\nuMfBRH7HjTIUUt9RFfMymuPZk9T9Z3Wb25SFOsQZJ8b4KJ11taMjvSJAAWLX\nngIcVlgM4cpSRrL04v5PgfO27R141Jb0n7L0ZHavjVbUiKHEAac1uaHqfA7x\nR1eAhsMQS9a3HW187uJ72G58AOzN38vL4epdLHZJ0k1Tcpj3EmhbYpRXWn81\nVk5P7NkLIjScrWJnL963vlaNMk7ejAmEMRdt12O1gIaCyIBSQTfddb7QkcCO\nIoHBSeYueF8WeHvXJLw4oiT0pDsE68lnrvUaxJ0sf8E2pdhX/CgKl59fF3e+\ncJsp76j1Nh+XG8e/BFGqCh1an7Xh6tI6L9ynynTjS59NqrMeHh/yBuWCkVZV\nu4dL3aNsFEAJqVT/X//9EWpsDPutLgrAWkcBLtbhP0AbF8vL+jIiwboWwsZh\nPFVFNI+I9zVSbZkDR5i02nO0eLkxJXKBcUTkKJAFDUyIRPqqBNonf4BeEopR\nBcilzqaPle9d5aNR2YAkUnZlS3WLEpJ61SxDyxviS2RYlE41kx47yNBnjmio\njBBi1EvStAuPQjUOgL4GO4oZ+JwwdFYgXvNTeIUQ4nSsZNnennSWr9blIavb\nvij+A7MgqkIzM+1kz5eQRID2mzJx2hnPSXBN6DjBHIBDc3eddhIoDpIGRMgB\n40Wz\r\n=O3za\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXG8z4Qe4zqp+44dHGpOuR6aP/fFhe16UP3VJtprcG9gIhAMfKcA4hqPIh0qQKnZGAe/+Qe70dw+hLzy+ZJ4OOSc0a"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.a7132082.0_1631742299718_0.6989511443481833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.cd9110cd.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qBtv5sBgbnPNN5ZTOwn/SrUrqKCwqf1dExZOSF8bMhjcTKScUrmep8yFO6Lq+bTGNSYfyOIvfsfVKXg8qbtTHQ==","shasum":"d27b14323a57576faa55a24ce979dcb49f9189ca","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.cd9110cd.0.tgz","fileCount":16,"unpackedSize":329427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4KaCRA9TVsSAnZWagAAlRgP/1Bq/iGOEkCYrs53HCUX\n0I4KkTGg+Xlh6TmKmbPvGNS8ofS8edE2Ny2XEGXNDWQH6detN/6CxLlar+Pn\nxtDG7LColcI2dTjQTjLtPY89CDRj/otSVdrUw32Vec6UxpnCmSo1KDI6OHNv\n026vtucfcaGy3ZhvNxqXLhPFoBwpdzB4o2To0N1clnX6/ZhBUMq7Tgoi6ZnM\nzC+ocKaOWKYBReA9CX6kd9LiXpdbyfVjt5ctNNF4EAaesdxKDPmkB7ewfm04\n2NKtkWLIJ+EKeYW29jdjq8qB6vVJBDppT9XUg2ckJh7glpbJb8SdJu/D/jXj\nofEiqK9cbMnR4eHNY2+opKKPW4AkYLMBOyMyLcpkdzMLH8qB3lGhUNo+qsYY\ncIBpVnunJrM5+85exciDEGvoOW9a5hYtnWdTb/ArESbg3da2ngS3LKHqTSjn\nw0/fQUrc1OWtNFfIN4blhlrFeEc1DvXYPj4NDWyzwb9hoKhVi/0DipgdDxNC\nMwld7TPnCfzMk77/lufouRViPoLqqF4Rghx243IZr4zYbLHvu8jerTz7rYyt\nj2LLWNGjleJmJxHV7wjouz0x6hY4Dr5gxT8uBlAzPypZE66ebhKoBRv3QBEF\nyT+fDwtFYJX3tIABxKF9w3XYFpDcRY4+4djxW1M/QDHpqOt8DlXmldCL3Koc\nOM7b\r\n=7M07\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1RMqx43dlUDvCokTwWX/JF0RsU/puHlXf8ErUwXgBFAiEAtpC/0xm4a8pBjHJm0xMVISAqbbppJk+D0nGi8RTvLvw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.cd9110cd.0_1631814297879_0.22982386964871515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.1e5a9883.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-yDYxerPQmu6zUo2O4HvFUnvS5ogzhc9B7UIF0clGTRdgUEsjippj4eY1Xm29B/JNLR9vMVp+d2e6X46Md9Sqcg==","shasum":"b4374019b02004e6c2c4bd32c4599299e7c9ef51","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.1e5a9883.0.tgz","fileCount":16,"unpackedSize":329427,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcBcEb1ytH3bOe0W377PYlX4Aa8/9fSjxII2RZfjbXOgIgdnaspEtEDRe77prSXlEQysUOhYCNRX0v8UL3AHT1SQo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.1e5a9883.0_1631911123123_0.1495186347667512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.32c830ee.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-SqIFK/mx1xw9dd9MonB+4ikYgxbwRRiZv0p4V1L+sMW2a8zDf7wGi5+HhPkR1Xk4d4+mDC6wMQ6/gQkAwCOeew==","shasum":"db5399a7e0d528d187cb9bd5e4ca8116fe333cb2","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.32c830ee.0.tgz","fileCount":16,"unpackedSize":329427,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH1csRZpjI/1lVQTzJymHs3vdV6jjDRizUq+p8qr6qpYCIQCwyurDpuXiSl1a2mLUaKESkNPTsq/7f2ebj5FE9DHQVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.32c830ee.0_1631920099835_0.4572767230612702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.1de87bb7.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-aqRDPqQFzGlP/xh1hb5HnLl9tbiSoErevdKVLih6Iz211f5DoYUg4s7Nvz9rHAjDLz1a+8qSmHo2uJWd1cevqA==","shasum":"02457916090d7b987b3bc317b4e90865ca40c3f7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.1de87bb7.0.tgz","fileCount":16,"unpackedSize":329427,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJV3YTqTs30cHrw7HAgy8/+YfEELyssjzLK/QSx4dpIAiB3atl1m4Ma86Wrp6odhtc7TZnKstqfZPuJitGEVzWR8A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.1de87bb7.0_1631991106897_0.09663049254352796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.f2ea80c4.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-YIRaQiwu+S/oGcg8kdIa7/wD+gCZn6hqVAqwsQ05cdBqzKTdqGuK9uCdBuMThR0jAIDiN5vyF3UFHmdt4KoDKQ==","shasum":"67688822748e1ff8e2a415a758a0d7a439316fed","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.f2ea80c4.0.tgz","fileCount":16,"unpackedSize":329427,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+4iF8O2IswJgJlQrN60/O3lKgVnCmrDl0zmZRxIq5fAIgLe6itUIOlN+PujaIPUA46slUdtD5Pr6CyXdMjU2mPnA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.f2ea80c4.0_1632160470335_0.5977561426334317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.569d739f.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-T9iYIveisZOQzPDPRKxiA1uKU6ms74Wjl9VkpWUtGKl38HeNU7g1QS3tNyVeckk344vOxYZr15HD10HkTmPSrA==","shasum":"83a0d96be1aa4c860403b14ff8d20568e358d525","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.569d739f.0.tgz","fileCount":16,"unpackedSize":329427,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICFZ9O9KbyGIfLH/U2I4yxu0lN7HWMHcgTTvnmFICw3BAiBF5eKZvLcyG0Hw2Rnfd3eqySsVVDYqhptqDjE+rMLvZQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.569d739f.0_1632172990815_0.7752829031664126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-elevation-overlay","version":"0.24.0-canary.5a434a50.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ikFJ/SZJHmUBhqcU7QkBjIiDnadUzC+1nhSHPWi/EEz/YjdbJFsAPEUn0fxcX45kquiXYLXzzUWdh4AKJqaQ6w==","shasum":"bcc8a44f3507722379510f5518c965e42567714f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.24.0-canary.5a434a50.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUIqa8pTIoyvCiTY5ln497r1QAMzrOfn8Kelid73GVsAiEAlkjgU98u4KAyGoK1j6WH0yds56MYnC5oUFUBJ4Y6uR4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.24.0-canary.5a434a50.0_1632189613637_0.6401988002289887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6be1a13e.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.6be1a13e.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.6be1a13e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-MpUuxyPy2k2pvwE6I7xzab+7fTn1KUIpPiyY5x1BNrpey6vBjypHaW7Z9rUgl6vRqKu3koiNesWjtb/KO+Y0tw==","shasum":"85eb0be2f9ea939b8d4d9ec2ac28858f4a8d8f18","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.6be1a13e.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHAKtGNbns+vja8oSw6roNv9eC5iBm9PoV3A343oZEWAiAp/r5oI4NpFKudo7m7kNcZJz2HnOOZgCsV05ZdmD6nIg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.6be1a13e.0_1632192751562_0.4370007410806218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-elevation-overlay","version":"0.25.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"6be1a13e29a0f18491948418d7076fdc1c7031a6","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-a+ZDe8Nppvg9fE9YCBFABqdM3QkgbskCisMugu8FoTV7PQKzgiSSOFMLGGACc/Q7Fy37KOM83RZV9zsqvAo2LA==","shasum":"cb1c5a78829200c6b50c8fa02ec2d4b9d69cb346","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.25.0.tgz","fileCount":20,"unpackedSize":337482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw0Vv4JpXiPnZw+zS47khEn2WuCo5zwkYmSRZbvoDriQIhANx7rCWlaDgDe8PAyly7sFLJFSC07yyUDXqhbwE1cp+I"}]},"_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-elevation-overlay_0.25.0_1632192768849_0.5886848585922666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.b1c1ab52.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ZyJtC8n/BQdJshofKlm7bN946MSza42PERVJzgXo4fgt6YO6sr0s6/1ItMTg0bMvxQvO442QuGPu1oysu8c9kw==","shasum":"96d6dcfbc2cc52fbb186b9957d4d38d47457efbc","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.b1c1ab52.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVmpcWLcR0BvMlXAXon+fC5HxZYINrvmFciMtruW5byAiBWJIfJQHYw7w3FZKR+aiIOglsd1KHfSJFHFKuDHqV+2Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.b1c1ab52.0_1632193906359_0.16249452538386233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-elevation-overlay","version":"0.25.1","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-5MerlS1LWR79iyp7Pk2iWHk3gqLymmAOPvQgEWzjRJEz7HAjIe4i/VdXASukIBt8UcXRYFHZvfjIy/0WEbH44w==","shasum":"2ebc0a00cd4686db14d2880cd44972742d03c083","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.25.1.tgz","fileCount":20,"unpackedSize":337482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBo/0QMNtX0IdWxG3Bb50CRwd0kSlMZiKTe9PRj7SZ9WAiBIZ1Vmll9ZSgY0c0Xd2T0ZnpkYRB6Ls/97TCtHeGAlRQ=="}]},"_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-elevation-overlay_0.25.1_1632193955469_0.7952336128485966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.ae060177.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-FqQw0qmq9W6a4MMLOmyJS2iZ6REujdI0ZeyJOU2x5RP/UL31cP9XIX2RERhZffLuoUFSFXPqwQe+Z+Wv8NxX6Q==","shasum":"96c2ffbe9eee540c6197746a6ffd98da6c0cafb8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.ae060177.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtHFmd4sCfCUp/uQ6x8BLYY/9DGsxSBrOBnXLR2yyaKAiA8ls8reOcuIwveT5qI8I6B1738lUgVFE0hB8sfvtE0+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-elevation-overlay_0.26.0-canary.ae060177.0_1632235062837_0.6119644869531611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.b6fe2a12.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-STn08Hd6YkInTUiQVpSN7xKK3VguheVoFgj8HIpibhTE5OaAjQwTaVMt1YhHxNEUHJvk1217Q7dLkaLGvvruTA==","shasum":"73f80667814880672d3ecb9a7846b3e558dc4c9e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.b6fe2a12.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3fgYOehFhslqvzOVb5sM7w37lDh3O1RW/ZAuaASMmWQIhALJdq+QshtiOLhQ6dZjwe5v5F7+kOi56zBXMORoG0tTE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.b6fe2a12.0_1632341751249_0.07413246465860412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.07e91417.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-sG+f98SEuVKG3cdCVXp6hyXBS1L2Y3+jgZSPtSWxOGljYq0MTwQZ/d5OqfZckdxawuKSiLuPnorrWeLBrCUpvw==","shasum":"536c65a1dc113ea1784db69225090ebfba413a36","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.07e91417.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsQhkvqDZquI8ETKcDmom2b3IdSNFJW15xonQ+9YlpPQIgblB6efk1ct7sEF4J2YVKHPT00RAdkDYTYTOcRpqUku8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.07e91417.0_1632344719456_0.6404748497613293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.e2203ffa.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-+Ui7Mwp6HXTrlUD9NHpxfkVNXReEsSa4GiZvKmvd7zw0qgJmGta0SpGO1+oYQYHI7rsrJcxvNx6ZtO0AnFnVnQ==","shasum":"c68a7654652a5e6b0c647a8269a6f3521cf4aa3a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.e2203ffa.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsy7nxG6yZqHFSf75BSlLVyTZJ7Fs/Yb0poOKLxH882AIhAKR3fBRuezoesKewq1Ge90QfYn85MeeB6+wflReNa/hK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.e2203ffa.0_1632421632289_0.03600623356405119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.4abe237e.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-mc7zwPcicCSv623pd+eOX+NTTuy2NpvdofcDAUVMuapkEV49nm0oJaGLsOTT7frNUJJRq96nz0kYCGUT0GycOA==","shasum":"11c2d445c2abc4036f53d606a30775fa07949586","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.4abe237e.0.tgz","fileCount":16,"unpackedSize":329731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8RrG1H/k8W0MKhzdZegYnN/xuR2bUEuzWWUcy+mO3agIgBe5LUsmwfD9VxiP50x9jVBIcn8Xgr7GyADyv/hIXjAg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.4abe237e.0_1632504643250_0.5867063670108741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.6278ee5d.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ob/FiWD+I49GiUKoNrDlY3rs08b6qnT/KpYVzvZm5d103vhg6OuyTCs7xxZnLbNLQKL9IuNF//KXFqIbwhZo6w==","shasum":"1dcbb6bd37f10abdafe813992286aa6f62b9833d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.6278ee5d.0.tgz","fileCount":16,"unpackedSize":329723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWCT5LE664HrmhflDj5hxZPGOoCwguL/9V0WbwBH/NwwIgA453o6DwZTO0wWhkqHjXQe5CtpeCfsRt7s9f9qKYN2E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.6278ee5d.0_1632767458674_0.9561963108311042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.3a5d5f34.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit-element';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vHrWB84GfwXY4UTvF6MNXhDfh8fg+EiwxAHvwSXvt6Y+nymb/wVpyo3YCpy7zgVC0k4N4Vz2hWd3TRJHTCCMvQ==","shasum":"427055aaba1a8d0cb8c4b41f112b32d9eccf5cad","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.3a5d5f34.0.tgz","fileCount":16,"unpackedSize":329723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqrfdaDHSiO9oEEk5Xbqxx4sDXG4ELv7OVIblWPR8KGQIgUQBrgrCtfuir7Xfmebl55pCbUe1JSqFXPa1d6nGOPjc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.3a5d5f34.0_1632782467507_0.21278417792305393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.143ed3c8.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CvLhBEGirZ+TnTMPiGNbIodiK9uL1YtwXeW6eaA5Zx0kyH/vUm6Fwa+D1PYdHarniX7Wxo2NlOaNbxZ/e07coQ==","shasum":"a1ddc4e9832e1bc6f90076a66fbbf5e1c7905388","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.143ed3c8.0.tgz","fileCount":16,"unpackedSize":329715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdt+W0FI2TR6j5oVjHhIbVieZ3NlhoD7twZRBDAPS0XgIhAKyWecfMY7Ci7A+14VqBMXm1F3k1kaIghZ6Ev/5+rVA8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.143ed3c8.0_1632880225989_0.03062505209501576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.e5923d68.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-TkvhRrAIPLAbPVR3iICyQivxIMgFuP7lcIqVz4ogo7x7Qxr1K/2leHD4T2/B94VbVLJ8ht9wp9g1ojOomJ4iiQ==","shasum":"5d4b7c7fb07531cba0997a3d2de1a0145bf46dee","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.e5923d68.0.tgz","fileCount":16,"unpackedSize":329715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJLKQaPIDaRWkmP2R0NBkkSVj90GveC3NczUlCto/mgAiEAwFwuLqPPMBOHWgYqTto7Pt2WVzsEySRu72bV4xy82uc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.e5923d68.0_1632960324063_0.6741169274565637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.d8ed5109.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-jH4twyDUwnw+7Og9IoISCfR8il5JqMcEtNqYCud33lqUXK0g9PWi+R6GiiuDD+6kJJ0+RKAXSO8pYITNncE0Hw==","shasum":"0624951f1eb993ce098c34ded253290bdb3f69f9","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.d8ed5109.0.tgz","fileCount":16,"unpackedSize":329715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcrLfgXoj6azOtrBGbjTlYfpXEw7mVrF9Zaiwvoo5OiAIhAKzBthHj98XLI2QVlXegpLONxqG3rJdwavmEEWKpKOY2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.d8ed5109.0_1633044809126_0.7301771066079448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.0efb9c2c.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ClDTs6+XM/f3/AqnKNPeMWuyVQnEgGNcJm8AZIJoSo0bfZH4Qe/jMO9vMQDob+JBKmGQ1f5wrq7pd8OOs7nxgg==","shasum":"1a5bce2c73989ec8bdc2f25cdf946d6833dda7e8","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.0efb9c2c.0.tgz","fileCount":16,"unpackedSize":329715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/9Bm9dSJL4S6FSLHfEzwiYKqxFtu5uVovbUC+G1AVaAiEAsucIDTAdkXvpIEOPOzPMi6VjdgmDXcEN4oQKr1M2sFk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.0efb9c2c.0_1633140470094_0.9461426389639438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.1c9adcb3.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-jy35wXgqEt8W/37yEoHavFwHXkF1NX3wSBnZBgQ4olmoYLMx3QBf8MUib+rYeaxguvr4HUmmmJ41suVK5AMkLA==","shasum":"ef0706427e576b27f3f908c7b9047a6de72f4380","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.1c9adcb3.0.tgz","fileCount":16,"unpackedSize":329715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjALVqdpgbYE2xx8is9HGZdysX8zP+SlW+ODmk0d5hpAiAiejpK+PHWSbA+/xmoYiC3iVRrOBcO+eH3wA1nAoBOog=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.1c9adcb3.0_1633368787545_0.8026778381556983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.dfc00d60.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-I1kAtEEqcGY4ogpeVO067HQU4Tct5m+JVnGkI/qI1TfPuj7rvyu0yKMDzqnp1fVUVZk8MjvA7wmE7u7555dDnA==","shasum":"0217a70525dbdef2fe8ea4f40667c53db0e88f53","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.dfc00d60.0.tgz","fileCount":16,"unpackedSize":329715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqAnrmhsjhZLLp/Ja990WU+XcsJZfCUd2hEcoviL48GAiB79kmsQkFSgWmqIPeIYBGwQym+57iP2bxGNuZDf0F8BA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.dfc00d60.0_1633741012179_0.7191396066590714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.c3aa844c.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-BHKKz7om4icC33AH9vdJo3uNHxKX6uUZBlITR/Bc4g/0AndrCutI/RAcGi+evDQDyEPrZHkkH4BH5xnSUA9P/g==","shasum":"213b1e96c7d355d03e66e78a72602fe57cd475ae","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.c3aa844c.0.tgz","fileCount":16,"unpackedSize":329715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJoKCleV7Vm5bzBzb3cWFUOdbgJAACH/wyHeYiIUFJTgIgcjQrAu5NhycEZSWJTOKIcvMma6wwGlYzGjFFqHq8xwU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.c3aa844c.0_1633994038035_0.6647769741320888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-elevation-overlay","version":"0.25.2","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-7IURdyoWRsnudOu7NV9pMg0ZMLB3LAqdKsv7dydf8CR5pql6VJH7SLKfu94ilJ5+pNXmrmWO1OMLyoJVc6hiqA==","shasum":"707958d9b9847d8c5577a2a56e876dd31308eacd","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.25.2.tgz","fileCount":16,"unpackedSize":333360,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtFuPAabE+NQtcYfqqW7V/HzzNcrd0JfnslHUyGsx+ZAiAmknaNXpbQc0S8taudQmeBwqlCug1HNVbe7POSdKNnkQ=="}]},"_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-elevation-overlay_0.25.2_1633994306653_0.7665352768320544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.406d6fe1.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-vGuXgoF+jyPcwl/xqGCOIafeA4t+2VgoYCJnTHdZGphvvZ23BypxpOmTiaiKwjzcPq00wilHQwUQ6pvdLrLtUQ==","shasum":"75a68888f8bba02986c01b4be9313615d1055b38","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.406d6fe1.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcQ2BZNXgj5xuMdoOs8u7f4la9l+rIKBuJ51m+lzulggIhAOprziDQ1D4GIumKseuO+Dzo3MUVgAgnPR217U2HYNMI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.406d6fe1.0_1634158742450_0.4021305879600632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.ca0a674f.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-q3kvgKQHxk1lArz4t+mBmLjwKEuHhnzyCJkiarGZsj2LBS579au3x2iw3uD3/09Ne/yLkKINQsq9AxlMoGHcCQ==","shasum":"3ac1e001485dc6cf7e1b5c61fc253207993ac80e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.ca0a674f.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUqz+JTbFtsT47FKpIPvBfQ3CEXrIPuA167zKJHq+NiAiEAple39raXrBk/VMvW0a8yQox4UC3vUtsENexxm9SYG0Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.ca0a674f.0_1634592987746_0.2670653703202275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.eefcf660.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-vIPnoyTgksYiWIlSTz7X2LBd4LxjXsQuPsV7daBQppURYfMPTT2Uayl08+vekqQs8xpLHNzsveiLrQbgEVFujg==","shasum":"36cf7ce3d81741b8b3d3200069e4cc74bceccea3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.eefcf660.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHz95p6s358z/NpXRS/9neVe+hqwxTI3N2+6QsZSMRXAiEArSytR+s5YMKMY2MgQZjYsyv1QdVlACG4n+vxZvkSMJ4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.eefcf660.0_1634764993490_0.6263023743179086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.d21acc8f.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-dTlLV6PhsM65LAPc0hn1Ap+En6V+J6Bscv5wHLnEfDXM4Aj1AoA8ZTuUn/mPvbq4m3IRwFcpvGfgiySjXVPxKg==","shasum":"57898c864563c19df94846473d58c5d81a399ed3","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.d21acc8f.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWZqoHYFUQdDPyIq3eeMkkdaurl4AxqjhiM0inuaMdnAiEAuKPnbBI1H0O/oaErdwGgwZmOjiIIjtdsMBq5HM/Zf6E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.d21acc8f.0_1634769125614_0.841864440312236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-elevation-overlay","version":"0.25.3","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-OOQnNOHtLnMSdDVDhOO4qobrwlSG+nw/Qtpk5ONQrl6di7CbxCvJqUKI6s4emG7WMozkhrZhJQjDl+KLaEaaMg==","shasum":"c3048e1c978c7c591ead0f43f3f7d1d10b6550ff","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.25.3.tgz","fileCount":16,"unpackedSize":331501,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHE6Q66Rfq3mQHpGy17PulQ+lmdKtk/eX0FJpekR2+uXAiBbuOQ6RGr+avFLFhwZJ8QiDmbuXQqU2jg38iG5rUkfDw=="}]},"_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-elevation-overlay_0.25.3_1634838933918_0.0641791181364002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.60449b7b.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-gBygSVvkdFh95gcjDl8RqXaohtBDhpRD5a44Cx6RQ+/PMYAnAv+VHm8W9JUH6s7jJqbuSgOU8VJGWGFwO6jD1Q==","shasum":"d572e333f78bde0d99f50e010fed9bd920947667","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.60449b7b.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4dgf74bDwlPomp8+gnV/MrIaM6MTaJgCpCxzMfoyMXQIgDAUhKQpgbTOr2SXZpIvSjH1dYJcwT7re+PDgv0AC7Gg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.60449b7b.0_1634840216195_0.3063369420127411"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.0d8084ed.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-is78kHC2GkrTrGGyFYC0cTVdFbqCairt76B0x0KoHBifqB/A4UPU085cZgI82T9o7GMsP6BHR5w2wX/Qlke/ow==","shasum":"4c75750463b8c0952b6839e12a2e788682ef3ab7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.0d8084ed.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmOXZVNbPsa7GVIbbQftZ6BfvcbW3MoSmPM/29b348ewIgWt9/oohLOI2661aU9vf3ajSpL2LhLfAGMa54JhFbYeY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.0d8084ed.0_1635443070599_0.02199615142471223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.232327ee.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-MNSAcSqkdT3ee1BUPPbOcZmaGAOkXky68l4J2PTXDsj1pfmkzhQDYohpPuJZxyo3X7uYU7grSJPejtRrjXAZiA==","shasum":"fc75c3df18aa963a13eb1c50e1a125ff195f7cc0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.232327ee.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTvDnjj4eMOL9aI+USi7UUPxik4g1iNetS1/nqvJxYPAiEA67CCJbQeoego9JdA429MgBkq3ILu/4h6UhOElwDlTI0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.232327ee.0_1635797719776_0.4494625712392777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.0a492ae8.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-G/lGKttKChBIB1smxLm5YUACDTsaIS1j09RIz7mjo/k53Fk6t5DA9YvNjRloR7UPI105hRqUkMTgNCBvMb+qgA==","shasum":"e8202ce2621349188b3a109f4b79787ed7ad774f","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.0a492ae8.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVcVqS7pFTTP2p99o5AQfbYbnejg7fYPsb6vOxsfRRvgIgA0XniZ9B7YaCIwaAOCD9gzlPpwlYXr2R9/RYw3VMlp0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.0a492ae8.0_1635847201436_0.7558290514160491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.0aa18745.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-G4HERMUrZonQj6bwLCQ71uTyf1MKr3BOlDfjS3XyC39azjEvo/vj+BIoIDDqmUVf9kh2bbnuEs+Y/EJXID6Wfg==","shasum":"4f41c58faef08912482f70bb62db03a3642f8d29","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.0aa18745.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTganFTBvZStNuBmspyl0iUlDXpSA/LODw5dTyS2JIKgIhAL5mlcUa6jyOTFAs2TAm+a/pKIVyIV7dhe24dQyf1+N5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.0aa18745.0_1635876441123_0.5120853967899168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.f3e28323.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-59s6SeFlI3UBdK/heQkMjhKRc8fsPidHgWlfed1+Di/ZcCc5xwFE7/HnVTZ5Np4I01ZS01QNNihXM0j525IozA==","shasum":"e444a953c4a9ae7b79619332565726c90cabdb80","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.f3e28323.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUTpoS8uB2I1Z7k7M9XaiJ65rEMf8GYrMShQHLGcPVHAiEAqxSEq8p1Nyr6PPAlT+P0gNixOGhdbIzPRR7hCMWRqZk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.f3e28323.0_1635879543233_0.3510187719697162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.27e05c5d.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-IbOSOcDEjrrNorpWZIPJaeQ9GQC0VJUM7SAKsxr1z5SlHXqP+b5I/UijCfKzQ8IBp791iuQPErVveFIIUrnBXA==","shasum":"4db8e5c4e58b69440fb6a28b3bb75ffe5f96c4b0","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.27e05c5d.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7VA2shBHDjFlov9/RWn411mJL6nO7nNN7G8IiLDCDsAiATPdpDp1cpd3+Fa/BzrtRXRU5M3Q616acPwNmxXGLa/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-elevation-overlay_0.26.0-canary.27e05c5d.0_1635965075268_0.2761796197472326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.b9e44af7.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-itJnt3i5vcOYz4T/XcILBGMYEWEA75JsnNmACSRejNkriApqZ9m9onvZdbNt4Qx6Adl4HCW/jxZQukzaui+Bdg==","shasum":"255a6646f396b93671f06bed1af367c64dc38924","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.b9e44af7.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP0CkiwBYR/0NfSE2zlrv7bZNsq52cQL/rwpktpWtmMAIhAONJ8RqEww76Llt/kN7Ca2X82/nbaj5qiBkBi5c+pI+r"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.b9e44af7.0_1635966218815_0.830596140643983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.448f6cb9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-yhFKODr1A5UDN2TjcTxh3jPTUp67J94FXN39FfW2mICg8LLBOehpnWThC2IYaCGvjN/bXysANwO6mH2C5Na7Cw==","shasum":"ecfa20a927284383f56ab9b89624df5b5862df1d","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.448f6cb9.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDeZm7fiWyRKehCyFxvOcBd9SRLBilB0eVO+HYXk43zhAiEA3x8sCfTfkRRCOAY/1uLf5rW76b0nG53p4hOCp1NKY/k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.448f6cb9.0_1636049250263_0.9418750913972267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.8067ce28.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-9oMuW3AF2gJoL4Pgx25PrrR8WXIgYItg1HqDjXv8CCJEth120sbRAqwp7aGC/q/xDbGz8Ov/Ve9QsaNE/cntdw==","shasum":"be08c4f665e81c56e1ec5181f96f91598395d2d4","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.8067ce28.0.tgz","fileCount":16,"unpackedSize":327963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4zRDXZEU72UUQtagSRhLLps7p0dEVGYToWS/vJRdEewIga/ss/ExxXchkDoDH+MhxEgZ6Pd8TAYX7G0zjbFJDZyo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-elevation-overlay_0.26.0-canary.8067ce28.0_1636064522835_0.8827941738359022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.345c2bb9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-lz/Phi1SGjTL9bJ0uD14cpAk6h+iNMIhGN/mSqnP9qzMWP9bZgF/RIoaq+v3FiXAUKnm719M986jCgvp6fsKjQ==","shasum":"e9193ac6099c25660bec544f9e81284b5fdf3cfe","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.345c2bb9.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3HCRA9TVsSAnZWagAAzSkP/0m6NEhixkd7+2n1Gcj+\n+u+S8cX44I6ApOe8VUov8+gB5jz/VreU7FFduv6CBR8t2vQLlKvHkK47KbSv\nmRNHGiOy89wWDBkKccxBWM2ONc7IUfU4eeWnFIFO4IUoL7l1P8A87s96f36q\ny5KDcd4GiGsfHmiJUq02n6xiPOPJYzxKqFDAkY767Wm23EkmGTdC96S9a2aE\nnZn870Z0oPnbyp98Ts5pAv/yf+t5ScNkaalKwA1VeyoYpLX6zz3WEU4FI0az\nVjlFNrNxt41IJFc4Nzv2TRlqwBHXpcCtxX/YKRa4yeG+7ssvObMZcXJuiOm7\nK1ofPwQ4Y63fCAPx/M1kNSt5Qwjy+dzRlnDGj9pV8KGjB7BOyCifQEDPN2xl\nbVN29QLCjnu/jADDZQW5NO0rgvDfZEkpA7HCq1pJHr4/P4S4U+/keqtfAlh5\nRpz3s8d9jH6i/T2EYgv67LWFOhkOqkr/DoD60d7RPcX52+mg/chSLzKurXqK\n6mkvbKNDbfdKoadLjWpaLD1Px1JX/SuNUt2lUm1j3QgaWfcuuRwM6TXwyECg\nV6fnDjMp6EBTCc40lXSs78JaUn6PO2lHjanguYmBJaG5zaZ6F+l8Y8tbxVmr\ny2nxCPoM2vjdtVSa7lPjjsScN3+lCkpN7kqxOwgPzzlAQRyKwnkP0JCsOOML\nl+sI\r\n=DIgm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtmpvEU30fpbvntH4eTHkLz8RaWfYtzBpXorhlt2eCrAIgctcJJmpdENqSPMDMN6TYZvkZozwrW0xpaH86C36XwgU="}]},"_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-elevation-overlay_0.26.0-canary.345c2bb9.0_1638464967445_0.05521786523127403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.0547aeeb.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-36HV79T8pbyxSO1u65GkahUzl5QHGyA/gcmi7JjPJBGP5Jf9T9Yb7mfQl2xs31RDP7lSmq6YG8yXhk9LUHhK6Q==","shasum":"7b73d38ec9e81ec1bd7890b1abe8d909509cc795","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.0547aeeb.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjvHCRA9TVsSAnZWagAAH9sP/39F32IKgR3TA0tmPWV6\nuWnzd8YnGhRX+BlvVNDkVoav2L8OW3/uhWoIdqq5Xi4dxCzQADa9NmN3A8OK\nEfiA6GXY8XDmhgrTA2S7LH8MTv/rWmLgRZ4imHsO1nbrhSr8ha667IbtCbMX\n639qA1XMaEy5C0nrs68s0ebVVJPjP0sY0wK1IPLT/hZ2nAxSa6vnbdATYr7N\nBFLJl7BYWK++UeweRDkZyRHZcNELj9BxS6G/qA2nNfYo3xrjm7U6zP2UhOks\nyP+FkcNydAx2UNKGxaOe39YcL5fBVtREtyu8fonzZJ85dcpDbEUR4824DyGl\nhwkBbFUYgI/nj8oq/5TmwANdMnrt3DD5+wnJ7xQLZTt6f3Y7E1RtKrx3jUBs\nlRe+vFItMLJ9JEuDd2T5Xr1h4rMXRZdF9GNODji6EH7WO10bqVKTM/PwUgb/\nS0ukDyQg4GAui2s3CNj8f7ffVlRHqLVKWU6BkPWMcjApqd0NGQhdfMSxPEub\n7+w0V1qaVXFzIqPTzMbGhF4Mn0Jrby5unF8tRR5XlLL5SJAjMJx7FRYlW1xG\nONRoaxtn8kUEW05qGJYXc8fCEBKCrsuRVwvj2qscG3BW5crNxhU3Vrek+/+a\nKV7YvQUoE6eSDwyEpGcuotaGK4JMJcswSlGzOAvOqYPs5W8uzaspr0rSpj7E\nO7cX\r\n=UD4T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhVQIRUy003PCDi6KnJOoLasQYu8yFNfbI73EdnPawMQIgdI+Iw3H0cfIgJPUCXsifwWroHCTw92GZurdJt7GOYHk="}]},"_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-elevation-overlay_0.26.0-canary.0547aeeb.0_1638808519206_0.8033133648156183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.3b2452cc.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-a/ddeZWsHyqgHL4sqSgjbMmV9qFIQlDkgSVGL9HkK+n468NJ7bpFF2N3qkc81mQtcJkHd8/+PrfF/LzxHJJL/g==","shasum":"61599ec5e160715a2402886fd923716ee22bc2d7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.3b2452cc.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUgsCRA9TVsSAnZWagAAe2EP/jkawovdzs/iPjzfV+wp\nwweF75po7v7M1jc10NhjjC24N1VPF5Qr6AH1Q8Z5lMv+Moy73/iJqt+Y8Q73\nWzolM8T/7PrEadM60LnVIAHKoYwFVl16Oypult74+aVY9rT35LoZ8ukUfmiQ\niJWtnHXyi4GLCTYPgWtRMq9BqM8M2MT98Mm58gQaQF85opVjtcLXsbKBJDBJ\nz5mPn7dEt0sRgAhTl2hSDR2jBM5TxxsGS9Nztd9hDccFNB9sj3UwKpJPaE2g\n/p5hFDIUGTkGk5ZUyChl2hjRve0ZpXF/6eMy05UORlJA8NLmsS4FkWe/aACy\ndelQNDJjFF4Kd/C6uh1fBVyK6pPj9hgLBBUeR9obK99wbC4e5/wQuQw8p2a3\nMtf8IhljOw498goVTsYo3y1UDLjo1Y7Bq8s45vF5UQ8q+vVfQ/pZvx1ZawdV\nndJobay3GCb/Lv1MuTe/T8h7WarLjRHD8HYLfvvIbk/GKLyyZK0wB15MNSoc\nd3wWM+l/vmfF92Hy1dlEz4Ow2v0SEWzTrVBnWQCG5X1kVUuQ5g/Az6tVLwiP\njwd82Zg1BvWOpKc6JmiIk/m4EK7Je+ThIIntwrAJot5pdRUpTItNW3OdQkXX\nGjmt6sE+qX6gVqKLQT0kSMDTkBAxsAuVhrkTgQwVL5+xd97cxNwN4n5YiaWe\nfnSd\r\n=Ob9m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg3RXS7521FqkPcaVjnO6FjrPBT5RmGq3nAJj9+9c6dwIhAP+xjVjWj8l3bU7wfTnxUMlwurWLTsY9xKFb10niDtfL"}]},"_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-elevation-overlay_0.26.0-canary.3b2452cc.0_1639008300603_0.19432371280947836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.cf7ba5a9.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-4fBgvZ70qwRM2VpPCkuv4QNL3+u4BhYjwTLbPkHzSr7MN30wOleGBZfYfZm6SKN5Vd+HjLW2clgO10xFRsj/1g==","shasum":"c4419c79052967cd036ac0516a1c572a2a737930","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6UlCRA9TVsSAnZWagAAJuQP/AttSUxrP2R95teii5au\nb9hhc23O4Mcu/v/N+rhn3RauCJXBvE78AsAZFQQXTgpwAKbOmphJ5WtFJwYy\nvTPtOxth0btVEwA7AZ+1IB+3my9CJrq8/0S6sbbW982ev4AhJhKxVe9xKplU\nzHhJuchIhkjDFwBn6cf6u4eCG38rfAgY+0szHbY6LguKwCTEPFnZCf9mLaDy\neL4bdI9roZ8M9f9vKocdOsF7Bx0nrRLdClFQWxT+AnZEtLsyAYoUYP6HmpxE\nd7nbQdnlM1vz/88uY7kbIPkAleaKJfpZF0kCbTdVHwuuqvPn1pm4IVXDzHQ+\n3YHpLWulmbE+01DN9XDtZOa1dq1sFy0zsRsRdrDK0inhsY+TReYJxxVou66T\n1TYIygvoS32NaDsNTVXU5G0xnQ8ESiDqua1d9eRue2hgwUNoY17jL8httpto\n9di+wThWSjsXxMKPgfAilAgtnSyUw88VxR03LjzfCbu/92zCgmJS+ON1/iNz\ngQaq7seGMYaCPoDUTXC9D08SHWvKJWs2FnaG103JLcepgtv0l8LI+qNGL4VB\n+lA8SIGXgkh1UYVQOzAvtY+puySKYkVzgYoGhUDQlJYiX86VM5Eyp08nYu+9\nKckqzfEc7TxhjTMdV1RBPB1IvFQNqwRmX493qg/obTMj+P1qcVHt5KKC71Dp\nwvhH\r\n=QCzu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0BrokFQy137lKWG2OvwncTBWjTHeUiFu0KVg8DLZNYgIhAI9BIPTzgIrw4aT6w+rOi/nbcNzXLfGrT4FUdTmfSVSs"}]},"_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-elevation-overlay_0.26.0-canary.cf7ba5a9.0_1639163173417_0.4462195028450231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.e1bcf14e.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-xR4OOy27ml71zr2FfeRdRJtZL0t/x4lNLUD3HGLCbv7WVTYSx1ElSCf0rDkxkTGR/idWAsb7RAeo41qb+x8bLw==","shasum":"f9910ea21ebc1f43588a69089329690e57abe079","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.e1bcf14e.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3dJCRA9TVsSAnZWagAA7mgP/RzLBGR0izOv6uiJhy39\nxALk2NFt2+RDI/THSGqncpjy1O4gE6NbZNmkWBFoMQmUa9LjPh8Xnjz6+8wT\ntgl8X9XOZoXPLsEhdBLeF0xL4uM5NbeomcNkTJs9IEas66VJRvwOmToDpl4T\naGifTlo2EuEpbvjmwIXlBfiy8senHi/T5ZvWIEVnDNwANpBacH6lFt3Rw4Y8\nG43z5KOiKLqUDWn0voyK/4p20FNjE1LQuBq73UXmSOF7y1ts5qZp/YfBmw2E\nXXVpSqZVHawqzJkBx7FCqY8vz87GmQ5TCQnHwR7kgL6/zBZaNnHdMVKqcF4N\nHyhT8243iNrGfLikWnvGqvWIAkk+sDkeribtFj1H1F7ecZllm+K4nZDLRPfA\nDdo13rgnkF7Ac62eOekqNxyaJPZ0yEyCzJSfBpWQNyyddAJbL1QlGKIkKezL\n0U01h4I4GMBOs05rdlaJbC8X3k61Q/G4LWVaFWsDv4S+T3eTKVbS7qppbfdu\nfGlSgD6j3F0pAWuf2DA+nRTO50FjmxdKXRYORv6vMvjT/SwICI2XQ8tcyPiL\nTkiMwOqX2Nhf/jJSSzfNW52ORCuo0vep1EXCv69nx0Mg6ZQbjCLFysesuCL9\nU3yNBjioeI5BXRozXoi/Sf9fD4xqHPRbJBBzHFi4WWNRaykPx3Xv0XtCwF8o\nCVRi\r\n=awQQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEcqesIYeob3aJBV/AlnQB22gcSqd+LNoWrrRI9k+9RTAiAMEjC2org2aMfMJ87VjF0ZGT56XmmR8VLrl8fF0kTaQw=="}]},"_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-elevation-overlay_0.26.0-canary.e1bcf14e.0_1640724297291_0.7923844483032618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.b9d35b69.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-htZEL7ffzco14oDAvXctaJi3PeAVuC5itr1RwNR4WpHrBH9JliPPmGaQWCwjw2sDgJ4sFHfJOpWCs63J0NP0Pw==","shasum":"44ff3dd513abff62d989fb616323e4d4728d832a","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.b9d35b69.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eLDCRA9TVsSAnZWagAAfhQP/3WDqutIg7LeDxU9MtbH\nizf2MiQB8aYwerGTjytvznSHR1qUwVINT7a3FjuhweuzUDK233chLx6C6Bc6\ni+l/g1mGPwcJMZuClFBnrvnTBDHHXveYKEMjww7a51X/edSQul8wWprhqISV\nZrIYalK84CJ+7GpeM/Iml8f9Ra2zG/FcOruF+lboFL6lM60fFixe9mSoQsyj\nrzHxnA5RZz1QBfWw0fN3FVuhdobbBAvAlsMVOo3tujO2xbdC69Dv2Os/PbHA\nh3CJv/G0aZl5gm/o9KSgsGkqAZiZUwWuv6NbQdV5zXAXQ+4z9fK9ZLmyIp3h\nQ7bdLnq19v9iOEh4IUKtpYVwMr1n/SxmYFfK8FgvNUxb1q8eCUsW/8E8UEiN\npPPjsWm4qwoZYrDyC3f97YkrWG47ynHFC9l3TKauBNgHUd10gWWGAuz9RZDO\nGHT9XB8lomo2BIfXYEHwYsoL1dDtxaXCHzjdAsuqIZM/L6uf9FMyozub3lIw\nwiSx1BdGHr7J8Wh/YGQgUIkEYAxohe7pngPF97gPo/xHsCY2w8XQWFsJMzkp\nAOqKAxtLV94ChaEyO/MVI7Vu9ZjqInocAQokJ1qi3sUGKw/Xa6g9UkvdPSfN\nzmwCHpIB9apDSSb7uVI7TmycB15o8m1oJ+l7aRbyQpcWc1/Robnm4npa6OsS\nk/1Q\r\n=74KR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx70luTOq32nJ8Z4AZN1LfbPHSuXP5o268V/aLecuOnQIgRBBswf/nG5C+mG3v+jxSVgYyfulFnq7LaqS74wUHPZg="}]},"_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-elevation-overlay_0.26.0-canary.b9d35b69.0_1641407171176_0.8087762778266794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.2afff08e.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-fDUdPNqxlQzNef+TxHpHKDTop2If7zzv2aW63RvbtdW7jzQkEGmTHedtTMkkfPS7Vgs5x+TOE92r1fcP5FCmTA==","shasum":"d4bdf4c22be3cc56e9cbc806c15cc90fa3d1cba7","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.2afff08e.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12uUCRA9TVsSAnZWagAAW4oP/0gdXRQJJnzXo19bX+50\nVXuGRJX4fXRe8IpxYSzDZsCLbN6gE1ZFwFPtwJEU9aaa6YCIfKHxmCXE+c6J\nk45QbLBKeAeNkOkh8TbaC/cDgM55JjcSWbdEc5+Ch/STO/IBpwbn/8n89jr4\nOUKoAQu6hvtzB8bl8noB896jIZVB3iwKoh9TBHz5jjIcSe1Jo+fa53jcrYfj\n7aQ1W8yLMTvsSOL1mTGx5sAtAl/cmuK5/UwfjxPMFHLcUEVNrlnEOot26WSS\nmhMEnceXHdnNVrYQEnyQbiPfBx1iyb0H+UF6FR/KrMmFOQLfqFKM9vhYy8EM\nnCX4riDe/27hhg6Dt2q8BY3qJ4SGzpGNVnjSO/VB/HbJF0gCbpLuB4diUE5w\nVWxf6E4WIbipZ7qoFVA8nReGjQzyRcF7nRZGTRdK3/UAwoLn7uqbDJTGnDXY\nFx9nmKFFZZOds1warEfqvCwgu3iU+qLI07Hnnn2pg3gNBtS2BjB2d7tZ/ZL+\n5LN4IyZcv7HOwwABvM+pQoYqO1q4JasUI7bikPNIfV2tP52STT0wI5L2E+Ck\n9xEcZwJFR6nkq6Ohczo1INdlLefdVOJXWK5fsLFfkTb6ltIGvlIUJ8V9wUqv\nhk4SaMvCrM1wp6UVnV9Sp0UakwNmXWokdIX5QBwxtwFxP8F97cUHc++/TqPC\nFjpk\r\n=O7Uv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKRV/uG5abruuGtmyWqiGcd/w4lbucTsQw/q25RFUNBQIgO6q13IZV2PpzWbubYPW3pTTkHf+fzlOSPv5TIp5p1Y4="}]},"_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-elevation-overlay_0.26.0-canary.2afff08e.0_1641507731784_0.7463466322741394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.893fc857.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-nzTqjh2r1U/Eh9hOK9HnuSnaepFdlq1d555uCGjx5yjQkHL9KHyghVxVOEKJfGTEvMrf5E9iyW6aQ9kZ4xZErA==","shasum":"a9d42d67ad76155086a709e3e966ea013f64ca78","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.893fc857.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IwICRA9TVsSAnZWagAAhXEP/1TYUtaEkHQjOFVQfwca\ngny00VyBrUdx3N+fgDP1Zobo1IujllKVjV3RtPNOVYrNs4oTlhersOo1SBeQ\nQJkPMBALmWWvZHhFjDKZSzOQ2z73qzKAHE4GtPJgHjs0fhwh5n0lEcM0jDQU\nl2NmdGzUjPam79gPCvdgqo9+IwCHPEa/Jpaiy+3jKzpRBIue7rMcHs5a5M56\nXbfwkjRM3X+beX7IKjcw+dEQB/Er4JOlJ+TyEk7uvFFg1Gu5+6R1DlnsAYdf\nu73HL/Z6TikYdHpYrpUkDO5et1kcK8Dp9CqrSaDxO6ySUtgpK1IH7DPv/Uni\ng0K9B2awOejq5V8O/XRLyejGrrdRjELe7LpeO/XviyE1dsaze9/orWK40Qq/\no5SWpDScJ5b8xAixOLqIos4FPL7ek8z3DWHTnhMnwZpX0lkgT8AiKmOAcFzH\nw45URHG7CKBKUDXvM4zQCDAJDL9YWyhPj1Y/Z8OgmgKXiWC1goy0P4t1IapE\n4IItBjefZdEtKk+6CHHNGiHskHg0YQiQu3Hy+8VM83si6gI1CoaC3s1MPn+z\ng85S/DwK9pov65f9MI77F4vOcitrIM+je0V3tb7vMqGqNwmXwBL+OK1ZyQDY\nhEbVXLqZCOw2DVoHQroPCOWz3k/BhjDSvKOC6qZitFC+wSn7UzG5OFEGv+bJ\noy9V\r\n=00N9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIiy+sTSD6XGOzkQkzI5Jz0BaBvrv26ITswxxLzJl1kAIhAITQTf4aYl3cy4D9dfuM09exCn/NwbZFOSGBeK4LVrv+"}]},"_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-elevation-overlay_0.26.0-canary.893fc857.0_1641581576079_0.8848069188263836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.69ba13b7.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-iCUkgda/P4GJxL8JY47HqjX7TTXHQicNrkYy+jx6pHUQBMM14XBV3THMDB7dj727B1p9S5t5rBOrQekrW3mkmA==","shasum":"f9871d622c87aa7b9c1919c63b5968d8d4f3ce3e","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.69ba13b7.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9ICRA9TVsSAnZWagAANEoP/iHmRH1arIkn51R8VJdK\n5rSKv5W5dzmLSq1VXHXd6qx1jkmzk/vXf+Ctj+be424eE5ZdJXhnDJW3Oenm\n7aXxJI0vM3d6RWRQZYaJdHqeO+LbE4doWV0eDPcH3cqXJrKnZwv/5FoAnkkS\nW0TkM2n8UQIeYPqCagnE+Q4ORko8X1AvaHznuQLCJDrMvh4fb+nnY0hrskF6\nOW4QO4v8pJ2f32PptR9oU2Cso5sd3Hlq/+ZGxtuAMXwHL9VX7dO8E5B4D4/C\na/bQ9zusUsjLl5lvty++1CEeqw6fLMiP49UFq5q6Kcxwjqkbv2Do2EHEQenm\nJiZIxTjKHaz175qGdH193tOGKrzX5VtcvjR0ebXUFcwH/V3cbERY0fA83r/j\nXg8wNnKRuLDKDklBSr75qPX1xolVRQr0tBn8oHi198GY3lET+6V9jgCoS3Fm\nqQnuY4nhNTkkHAWpyafsoLqOXrcdh6fSlpJiLT0EY2u1LDfTL0KwlsD8EC2L\nzrk5QiBdgyxLTSReg7fJyD8ie/F154mZprfQ0gEKUNRWpRoVTwwD5IacDUl2\nWHeC0SAMSovc+NzAou63Exlti7YFgZU55Tz595LYHCyFgZUGhKGdWB7PsvHH\nRZsTewdOoP+Q58obBizDK/AvQ0rXuJuA8k2YNO8GOF7pWCrp4yIhg8WlRzNt\nNyPB\r\n=V5Gq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjdE3S2SCIvt0en2IW+ZRtipmNdgBj26KTYqa+osYckAiARdljcFIlkkEC8ecHjpqw09lXG/G86xR5Qke+vVevAfg=="}]},"_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-elevation-overlay_0.26.0-canary.69ba13b7.0_1642630984290_0.8872979797660294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0-canary.0af8ade5.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-bQRJCUbQhoNIm65QPGToLwVjABHbR4qfQ4KYfkYh2XZd/QyJ/aI4GF8Nlh6a5q87jrH3gg8NJJyvv7ANSgkAeg==","shasum":"0672a4748f1343d904795de11b4adfe55b00e233","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0-canary.0af8ade5.0.tgz","fileCount":16,"unpackedSize":327963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZdmCRA9TVsSAnZWagAAAPEQAIbcjhurj1lDIOEX3PHN\n8MZ+Nt/+lapc17FsVf5kSH4Ur7EnsrbJnxJbhIXUa0WpdP8ZBHkR75BjNcdH\nx4GcVctHn20p0A4RVyvgSX5qO4TCiRuUNgS3ygmvgec41nmGVpZxubhMFVoJ\nVK3UxU690GuFu7XZyBFVBzTTToMH5QsLk5LET7yeNMVnuKsasmMFKKB6h1dy\n73SvKBz/rWA0ufhfSFcOo/1IHOXxOQwAnbj7eqC4X5nMOJZSxYFrWzdyUFdS\nKWnwKwfd13OSTmRMq9Rrh7vu1a5hLeUkW9erXlTkFzQvH5nSHtqrERzLNS1G\nfw5GnJzPRjMLHUyFwG5avzYMuMlBymxlBZ07+rkTVWrZlFfbbNEc00sXobcv\nOViqJhbyVmCre25G3PC89yPswF7i38SoVpROIgbHeSQ5oB7ZcuqGDDnTTy4I\nyFL9/zzDq4FZm4Js0x69PCtziBW8pkPv5RtoFg7Q44SQes602kJttUHR9lAq\nMH7g/kwmIdoxkr0x7q1bRvSCeVlf5t2MWLx+F7KuFfP4icEZaQtsVofYpBmB\nwY3UzcJf06AqalPRlt69lWaLd2ngLTB4c0/Xo+znTHil716mqzSZMi1e4rLy\n5s8liKCr4NRZPP+UXtUvA2ajl9Rifij9+GaE26HUisDIrB0Tos55UPYLH0L+\nEXxm\r\n=n1b4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9Gkoqmoh9teOnpgCK9T8B4ogU1Gzd+gQg1//jue0dZAiEAgk+4rKYyMUPy57MpJRPEZqx6TgNx9fra74Z94749PT4="}]},"_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-elevation-overlay_0.26.0-canary.0af8ade5.0_1644271462687_0.6527849625789885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-elevation-overlay","version":"0.26.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0","@material/theme":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-lTo0aXGFliDot0ypj+vIj6eJKnSqTX37wOKD2hEYDiI3CUr3YvYwXkuniECS9vHMYZjnDZpckMXpGFa8GF3Cmg==","shasum":"e5885ba46c7c54fec9608c0f8efb91f769022681","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.0.tgz","fileCount":16,"unpackedSize":331354,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+670VKk0zFIEKJV75qYcDeCXndCxOU4q0LMC3eNS73AIhALjZpWjty4+OqgIHDMNIcrtxBO2LNELqYIbxCciARj/z"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWaxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3GA/+KSW1hzg/36hUL8Tv74m3mYyp0ghTNySIF1hNf/1PxlPMut4E\r\nc0Alg0tjJwiYcLJFSOkjVdRIfZNAX3HMCaSQk0ptmpUNp97uH3CIc+2JW/vU\r\neYJCrIH+LYmsVu/s4gnjRn2v7sOcVkZ5ZH8ICVWlLpBbcwIXLblaZ2yL8G2z\r\nPiWeyIvxwxZ81DBWYrek/2EA68rtA3vXDoUz1+DO9w7muNCE0/4KEC2l6aQ1\r\nJBP8Fe3LNCy1H/ByOrjUelDCYaYK96nPYJrqSS3dAZUNUCHrkEB8iQibyokL\r\n8cBx46dK0eFEi4z9A7SzjnXpLaLqkfWY232ZJZWW6QgN0xX7GkV9jhvKf57I\r\nWRFSGr3Nn032zilDIZhGp+1mjfpAmP0sbrZsy/Bn1K0kxK8Am2q/l1x6Tn8D\r\nwfvK+SddZSfxVBge/M2spbt5wgkSEZA8C7apcfj4U4DnlRWm/ol36BqmIpWO\r\n88oaVhkDbmjbXCUIZJsrtpsJ9EmgdNcUVMgZ/0IpfHnC2HI5WlvfC913eSD0\r\naGlOTG/esa+X2dxnFfNDQcRetY9rFJX19lT+D+JIgTdIRvIkwPuZMEaxIhos\r\nI60X6l0Ua8a9N5On/IwCo6vMflkHhtlFqekPJWG3b9BSvk0kV/6Uuaxk5ChC\r\nuSS9LZH4H6BuuCYxrhdsXhOs6ZXKWVcadak=\r\n=YQcQ\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-elevation-overlay_0.26.0_1651599025050_0.6681363979982105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-elevation-overlay","version":"0.26.1","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-ZDC3ZcGhlZ49cpQCxVrW975CasLyJ0TCZUA/VGb4YOD2rygBIbwIJG7qvlTFwBHYkHuW3gUgtO4EvJEomzIQGw==","shasum":"56b930bffe077abdb8e77b133a99bff20774a8be","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.26.1.tgz","fileCount":16,"unpackedSize":331395,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Mt1BxjMiivwzkCurha1ow5DLAzn4m8XZIL5YcgwttAIhAIcW4W+V5am8GJ0iMWIoKEK4j/oNFstk8qojI3bQKau4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2GRAAh5ShCKGOznSXdrlDV6e+Ts2pS4PXTFNUlrtN4NjkCf91iM7M\r\nopwRVUrQxAf34RAD35B524kSwRd2zyTzdKIegRJVybRcyrmwIWyYQ7Yj5/ZB\r\n2Q7g0KzLJvGTt81dVbr69FJmzWbdbCXmEV/Rl/xeAKCnxprsqcIfhon/sD17\r\nkR1N1Mwb1Pi0VpKj0pXy3u2qKSgaYcp8PybMATNZMuINMAsBWEIt2xHqbFic\r\n8gdHKahFVJdHb9uUdzXioON5smPAgmpt5/WWhfW6oYORdKkLN+fEfh8ijrJX\r\nzyfIegC8rzaZVQHCt8SqUiyPw4P90v+16NDTq0xz9FYb3GT7Lm6hXnIjTbjg\r\n5NNe7P5JuDDSsZwmikWbmpt9UBFd9gANsxFQ6bjRk8ArFrr31gEuoGEbWI/j\r\nijdKaH+dBxEiPhwWfGV1KCn4W505mtRugN5LcWywCGyIJCmkmEypT9p4FVwc\r\nr4QI83d/LfuIMRbpvA6Q3bJj9CSDsOKoBEaelPMwTJPAUXHRqVTjD4lClrTE\r\nLbpnnDOL5fI7WAvc007TRGcZzh7MJBRWAqZnPsUdEYQyAmPcVVDbfq7oJMXo\r\n/joQ7zvfp+u4pAtnw0Alowxt4Kx14I4QQAhmT+jBvqcHhGLNIR0bifwM7A+2\r\ndWZlY83Z2Az3zLsl6ur4c5eQmF5gn0+QFac=\r\n=iUmx\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-elevation-overlay_0.26.1_1652128302091_0.08734291793861648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-elevation-overlay","version":"0.27.0","description":"Material semi-transparent covering of an element indicating its state","keywords":["material design","web components","elevation","overlay"],"main":"mwc-elevation-overlay.css.js","module":"mwc-elevation-overlay.css.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"license":"Apache-2.0","dependencies":{"lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-elevation-overlay.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-elevation-overlay@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-GJZHC25Ec9fFgQBX+Knjt0T8alDP+yusp5ciovKt/3O8xtvn5IsmvGVsf+RVirm4J9uPwqXqm47y06G+TcLnCA==","shasum":"48a3702a06f55af719ebae12e8cff4d9b8bd0342","tarball":"https://registry.npmjs.org/@material/mwc-elevation-overlay/-/mwc-elevation-overlay-0.27.0.tgz","fileCount":16,"unpackedSize":332186,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0qFBWoZlQvNHX23oqEpyGDU3oWTq879uo9RLudxppHAIgXWptMmT1pP/EOAW+lTLxMVJpSAwfCsreNBrDXQ+D+bk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qX5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtOhAAnPc8YjDhUpVICUczNZYdz97ErBYw9S22Ov4UrZFQfF+X9fd2\r\nw1LhvIe9+Ba5crHLIShc2dvVL0PWbIpx9qClbsg7Oce0CGDF1THfHD/cWgvc\r\nRzAyXgq6X/ypAxqLTw8/CiUIfQKwnQEKvBY8VJshAwvzGginMLK6AS7WsmdW\r\nCYAHMvq9ZU7D7w83ylaHCUl4jQQpWx6NEDU7FQEbuTofjF/RiwXI0BnnWSAz\r\nE+LbiPEDRrThsLHeyUXXW/z3OYrIAZ6cBWbSY1WZ60OhnT3mk2ds4kuzHCNu\r\n6AoAfKR37PPLnTrKsQ620EBFgmcjS7t+YLaJZWEJHaE1bm+Fzz0HzMjtCs77\r\ngsXVqqvRf65uPs5eB3uFyMtyun30ysrWSfyTUzjJ77bImZqjn59htXOI4YYA\r\nwph9LvIjhxwEKsPzO+lv5/Rbj/NCje/p76jImMceNGctojOCc0MpS4GY8c7s\r\nSC8EDoNpu5R0MUz117S+ohuauyw1uJXawAKS43Gx9CLEB+M8Q/Enynj1++Wh\r\n6WjG5Kfou/lnWwdsXUUqanH6kTHMUN0sFeJTyL9Iy3AAF7koQQfZHom1BnH+\r\n/WHoxvtlklMTr2Y80ZM26xjOUYScxxRgzLEDt8Pq2YmuzuA974o2dHQOfUxK\r\nnrgTCDMHGxunhGieGnWYc32eQE8aTlKuXuk=\r\n=bD1h\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-elevation-overlay_0.27.0_1660331513575_0.12489264375064568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2020-09-24T23:20:26.170Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:20:26.558Z","modified":"2024-04-04T18:48:41.758Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:06:29.708Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:11:01.631Z","0.19.0-canary.347110f1.0":"2020-09-28T16:49:28.295Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:00:29.513Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:37:25.088Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:07.085Z","0.19.0-canary.615d861d.0":"2020-10-02T01:32:42.170Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:13.529Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:26:27.335Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:13:44.316Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:06:55.435Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:29:50.462Z","0.19.0":"2020-10-07T22:33:06.604Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:52:58.399Z","0.19.1":"2020-10-08T23:05:33.358Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:06.019Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:33:37.808Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:21:22.963Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:45:34.050Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:09.207Z","0.20.0-canary.3280b686.0":"2020-10-16T00:03:43.270Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:13:43.448Z","0.20.0-canary.4773c773.0":"2020-10-16T22:33:24.494Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:12.190Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:23:31.170Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:22:58.670Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:17.856Z","0.20.0-canary.32961593.0":"2020-10-28T00:38:09.066Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:06.883Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:49:42.428Z","0.20.0-canary.124beb49.0":"2020-10-31T00:05:54.909Z","0.20.0-canary.5937f468.0":"2020-11-04T21:04:49.927Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:06.344Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:05.435Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:04.978Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:02.422Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:23:08.921Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:20.244Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:01.735Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:47:44.916Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:12.930Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:24:44.039Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:10:56.626Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:51:22.938Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:15:52.411Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:03.965Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:08.209Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:29:46.800Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:09:18.380Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:23:52.325Z","0.20.0-canary.72092360.0":"2020-11-24T04:17:26.714Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:47:35.872Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:04:25.736Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:26:22.436Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:04.560Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:15:33.093Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:06:23.006Z","0.20.0-canary.9755be10.0":"2020-12-03T19:24:32.515Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:48:57.513Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:04.199Z","0.20.0":"2020-12-03T22:28:31.971Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:08.515Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:02:58.880Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:15.880Z","0.21.0-canary.635c7996.0":"2020-12-17T23:30:46.947Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:47:46.374Z","0.21.0-canary.41f77000.0":"2020-12-18T00:34:23.083Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:00.276Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:01:57.800Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:48:47.860Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:53:20.870Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:07:17.176Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:08.183Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:44:40.625Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:06.959Z","0.21.0-canary.269eed01.0":"2021-01-13T21:44:30.401Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:03.358Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:03:44.163Z","0.21.0-canary.bc113605.0":"2021-01-14T00:44:31.062Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:08:29.778Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:06:45.121Z","0.21.0-canary.2899691d.0":"2021-01-16T01:43:47.803Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:20:36.328Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:51:28.102Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:05.985Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:00:43.297Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:36:50.933Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:35:56.161Z","0.21.0-canary.664a2927.0":"2021-01-21T19:17:49.719Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:46:41.459Z","0.21.0-canary.027365eb.0":"2021-01-22T21:06:41.502Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:25:41.253Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:03.860Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:09.878Z","0.21.0-canary.c8797192.0":"2021-01-23T00:06:33.085Z","0.21.0-canary.946f5563.0":"2021-01-23T00:42:39.115Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:14.307Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:05:30.702Z","0.21.0-canary.14e01610.0":"2021-01-27T19:50:43.068Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:16:20.873Z","0.21.0-canary.5a328336.0":"2021-01-28T19:53:53.331Z","0.21.0-canary.533b1251.0":"2021-01-29T15:10:50.485Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:16:39.296Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:02:29.222Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:32:33.972Z","0.21.0-canary.5160e548.0":"2021-02-05T23:50:33.985Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:17:46.644Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:16.481Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:43:08.046Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:09.109Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:19.035Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:47:31.474Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:01.563Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:17.791Z","0.21.0-canary.d84df029.0":"2021-02-16T19:06:47.059Z","0.21.0-canary.c525f471.0":"2021-02-17T20:52:37.490Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:09.489Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:01.452Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:01:28.492Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:18:30.733Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:13:52.102Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:09:25.358Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:00:23.611Z","0.21.0-canary.12574572.0":"2021-03-02T20:28:42.128Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:33:15.632Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:45:26.305Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:03.011Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:50:36.007Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:21:14.614Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:26:23.317Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:22:49.065Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:23:47.917Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:26:44.882Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:40:20.169Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:50:22.965Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:07.259Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:50:54.264Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:36:30.946Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:22:24.618Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:45:58.880Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:28:32.267Z","0.21.0-canary.0138863c.0":"2021-03-11T18:35:43.624Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:00.827Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:15.513Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:31:34.055Z","0.21.0-canary.4246c082.0":"2021-03-11T22:38:32.695Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:03.475Z","0.21.0-canary.7033124d.0":"2021-03-16T18:36:46.293Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:13.490Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:03:47.981Z","0.21.0-canary.572107b5.0":"2021-03-18T23:53:33.629Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:12.243Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:08.650Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:20:26.285Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:02.971Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:07:48.735Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:10:39.277Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:46:53.915Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:47:28.235Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:13:20.808Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:41:02.944Z","0.21.0-canary.852f873c.0":"2021-04-02T05:21:29.630Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:43:42.422Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:17.522Z","0.21.0-canary.583644a6.0":"2021-04-05T17:50:16.364Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:35:22.790Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:41:58.386Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:22:58.697Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:23.480Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:10:34.936Z","0.21.0-canary.e142c144.0":"2021-04-12T14:49:51.049Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:04:40.978Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:38:31.354Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:07.558Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:25:34.669Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:05.161Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:09:40.428Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:21.911Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:19.385Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:45:54.159Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:52:27.050Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:08:39.554Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:18:38.982Z","0.21.0-canary.0875e898.0":"2021-04-30T21:26:44.506Z","0.21.0":"2021-04-30T23:57:56.169Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:04:34.750Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:33:27.516Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:32:56.044Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:09:54.858Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:13.081Z","0.22.0-canary.5813480a.0":"2021-05-05T18:24:32.939Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:58:19.652Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:12.583Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:09.318Z","0.22.0-canary.e300688e.0":"2021-05-07T22:23:35.984Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:28:29.062Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:33:44.686Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:33:51.417Z","0.22.0-canary.004aca62.0":"2021-05-11T18:05:28.668Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:15.065Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:50:53.661Z","0.22.0-canary.4021b2f9.0":"2021-05-12T21:59:46.725Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:16:41.470Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:02:39.688Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:08:32.559Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:57:37.651Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:04.950Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:57:46.125Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:20.446Z","0.22.0-canary.2212691a.0":"2021-05-17T23:51:57.127Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:21:38.964Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:15.640Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:39:28.405Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:12.240Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:12.663Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:15:44.916Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:01:55.995Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:01:19.092Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:11:35.437Z","0.22.0-canary.b9b0e330.0":"2021-05-25T20:59:40.467Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:04:43.093Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:21.754Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:10:12.295Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:12:32.442Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:30:14.606Z","0.22.0-canary.227a4614.0":"2021-05-27T16:02:22.685Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:44:25.125Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:32:22.311Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:18.320Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:44:47.400Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:49:29.876Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:35:56.656Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:25.415Z","0.22.0-canary.e1511867.0":"2021-06-12T00:56:40.492Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:05.833Z","0.22.0-canary.573d8913.0":"2021-06-18T23:25:59.488Z","0.22.0-canary.21dba001.0":"2021-06-21T21:39:46.466Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:55:23.515Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:08:19.198Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:15.262Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:16:33.275Z","0.22.0-canary.73122cba.0":"2021-06-30T19:35:51.071Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:18.862Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:31:25.885Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:45:31.085Z","0.22.0-canary.d53edeb6.0":"2021-07-07T16:59:27.549Z","0.22.0-canary.2226489a.0":"2021-07-08T18:00:46.837Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:00.044Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:02.857Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:36:44.674Z","0.22.0-canary.cb42f5bd.0":"2021-07-13T18:19:04.773Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:21.283Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:17:51.689Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:25:52.313Z","0.23.0-canary.cacad1c9.0":"2021-07-14T22:29:58.263Z","0.22.1":"2021-07-14T22:52:39.499Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:53:19.791Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:38:49.157Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:02:57.763Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:21:54.836Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:20.367Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:01.564Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:21.213Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:56:33.884Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:10.628Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:11:22.949Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:05:51.978Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:53:21.415Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:06:44.018Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:49:48.683Z","0.23.0-canary.104debd5.0":"2021-07-19T22:52:52.002Z","0.23.0-canary.4612705d.0":"2021-07-20T16:03:56.287Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:33:53.368Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:14.867Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:15.436Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:23.912Z","0.23.0-canary.e0693475.0":"2021-07-23T18:55:31.198Z","0.23.0-canary.d595e030.0":"2021-07-23T20:52:31.873Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:09.218Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:08.017Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:43:26.941Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:52:26.907Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:21:37.226Z","0.23.0-canary.ab310900.0":"2021-07-28T20:20:44.937Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:25:29.409Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:30:48.437Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:01.764Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:09.204Z","0.23.0-canary.21918905.0":"2021-08-03T21:13:46.835Z","0.23.0-canary.193c87be.0":"2021-08-04T18:06:54.218Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:13.695Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:46:48.765Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:13.287Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:09:37.804Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:08.337Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:21.109Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:03.672Z","0.23.0-canary.3f47ae57.0":"2021-08-12T17:59:25.598Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:23:33.819Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:22.049Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:37:45.496Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:22:41.157Z","0.23.0-canary.dbb8b366.0":"2021-08-19T22:59:45.797Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:01:34.526Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:26:39.184Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:55:35.205Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:20:50.798Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:25:34.320Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:04.799Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:01.647Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:49:30.526Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:11.627Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:00.727Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:43:24.617Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:25:34.390Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:17.101Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:08.449Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:12.054Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:07.080Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:30:55.872Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:18:17.950Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:24:53.351Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:07.688Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:15:20.174Z","0.23.0-canary.4962a163.0":"2021-09-07T23:52:47.550Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:12:54.933Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:08.112Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:25:45.297Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:16.395Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:04.528Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:25:40.754Z","0.23.0":"2021-09-13T21:35:34.812Z","0.24.0-canary.9830d665.0":"2021-09-13T21:36:31.281Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:31:33.927Z","0.24.0-canary.583613a9.0":"2021-09-14T16:54:31.154Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:31:35.337Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:13.663Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:12:34.753Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:04.451Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:07:56.636Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:31:32.938Z","0.24.0-canary.a7132082.0":"2021-09-15T21:44:59.900Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:44:58.099Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:38:43.353Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:20.124Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:51:47.118Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:30.500Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:11.022Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:13.824Z","0.26.0-canary.6be1a13e.0":"2021-09-21T02:52:31.753Z","0.25.0":"2021-09-21T02:52:48.972Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:11:46.569Z","0.25.1":"2021-09-21T03:12:35.642Z","0.26.0-canary.ae060177.0":"2021-09-21T14:37:43.103Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:15:52.079Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:19.668Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:12.561Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:30:43.435Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:30:58.880Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:07.908Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:26.228Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:24.267Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:29.309Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:07:50.407Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:07.725Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:56:52.317Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:13:58.414Z","0.25.2":"2021-10-11T23:18:26.813Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:02.596Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:27.924Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:13.759Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:05.855Z","0.25.3":"2021-10-21T17:55:34.106Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:16:56.324Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:30.792Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:20.188Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:01.766Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:21.368Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:03.455Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:35.385Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:03:39.208Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:30.473Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:03.089Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:09:27.648Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:35:19.394Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:00.848Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:13.585Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:44:57.553Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:26:11.347Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:12.045Z","0.26.0-canary.893fc857.0":"2022-01-07T18:52:56.422Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:04.498Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:04:22.910Z","0.26.0":"2022-05-03T17:30:25.294Z","0.26.1":"2022-05-09T20:31:42.382Z","0.27.0":"2022-08-12T19:11:53.940Z"},"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 semi-transparent covering of an element indicating its state","homepage":"https://github.com/material-components/material-components-web-components#readme","keywords":["material design","web components","elevation","overlay"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/elevation-overlay"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `elevation-overlay` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-elevataion-overlay.svg)](https://www.npmjs.com/package/@material/mwc-elevataion-overlay)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nAn overlay is a semi-transparent covering on an element that indicates its\nstate. Overlays provide a systematic approach to visualizing states by using\nopacity.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/elevation-overlay/images/dark_mode.png\" height=\"163px\">\n\n[Material Design Guidelines: States - Overlay](https://material.io/design/interaction/states.html#anatomy)\n\n[Demo](https://material-components.github.io/material-web/demos/elevation-overlay/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-elevation-overlay\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/elevation-overlay/images/dark_mode_button.gif\" height=\"250px\">\n\n```html\n<style>\n  body {\n    /* dark mode surface color */\n    background-color: #212121;\n  }\n</style>\n\n<my-element></my-element>\n\n<script type=\"module\">\n  import {styles as elevationStyle} from '@material/mwc-elevation-overlay/mwc-elevation-overlay.css.js';\n  import {LitElement, css, html} from 'lit';\n\n  class MyElement extends LitElement {\n    static get styles() {\n      return [\n        // use overlay styles\n        elevationStyle,\n        // this element's styles\n        css`\n          button {\n            /* generic floating elevation */\n            --mdc-elevation-overlay-opacity: 9%;\n          }\n          button:hover,\n          button:focus {\n            /* higher interaction elevation */\n            --mdc-elevation-overlay-opacity: 15%;\n          }\n          button:active {\n            /* highest interaction elevation */\n            --mdc-elevation-overlay-opacity: 24%;\n          }\n\n          button {\n            /* Dark mode surface color */\n            background-color: #212121;\n            /* bounds overlay to element */\n            position: relative;\n            /* dark mode text color */\n            color: #eeeeee;\n\n            /* misc button styling */\n            border: none;\n            border-radius: 26px;\n            height: 52px;\n            width: 52px;\n            font-size: 2em;\n            outline: none;\n          }\n        `,\n      ];\n    }\n    render() {\n      return html`\n        <button>\n          <!--\n            Must have class mdc-elevation-overlay and must always come before a\n            ripple node.\n          -->\n          <div class=\"mdc-elevation-overlay\"></div>\n          <!-- surface content -->\n          +\n        </button>\n      `;\n    }\n  }\n\n  customElements.define('my-element', MyElement);\n</script>\n```\n\n### Customize colors\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/elevation-overlay/images/styled.gif\" height=\"250px\">\n\nAppending to the example from above:\n```css\nbutton {\n  /* Note: try to keep luminosity high on low-opacity colors on dark */\n  --mdc-elevation-overlay-fill-color: lightgreen;\n}\nbutton:hover,\nbutton:focus {\n  --mdc-elevation-overlay-fill-color: yellow;\n}\nbutton:active {\n  --mdc-elevation-overlay-fill-color: red;\n}\n.mdc-elevation-overlay {\n  /* transition animation to sync up color with opacity change */\n  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n## API\n\n### CSS Custom Properties\n\nName                                   | Default                               | Description\n-------------------------------------- | ------------------------------------- | -----------\n`--mdc-elevation-overlay-opacity`      | `0`    | Opacity of the overlay.\n`--mdc-elevation-overlay-fill-color`   | `#fff` | Fill color of the overlay.\n`--mdc-elevation-overlay-width`        | `100%` | Width of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}`).\n`--mdc-elevation-overlay-height`       | `100%` | Height of the overlay (`absolute` positioning may need to be set as well e.g. `.mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}`).\n\n## Additional references\n\n- [Material Dark Theme - Properties](https://material.io/design/color/dark-theme.html#properties)\n","readmeFilename":"README.md"}